Animated Gradient Text

Text with animated gradient colors flowing through it using background-clip text and CSS keyframe animation.

css javascript vue svelte

Targets: TS JS HTML React Vue Svelte

Code

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: system-ui, -apple-system, sans-serif;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #0a0a0a;
}

.container {
  text-align: center;
  padding: 2rem;
}

/* --- Animated Gradient Text --- */
.gradient-text {
  --gradient-speed: 3s;

  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;

  background: linear-gradient(90deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3, #54a0ff, #5f27cd, #ff6b6b);
  background-size: 200% auto;

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  animation: gradient-flow var(--gradient-speed) linear infinite;
}

@keyframes gradient-flow {
  0% {
    background-position: 0% center;
  }
  100% {
    background-position: 200% center;
  }
}

.subtitle {
  margin-top: 1.25rem;
  font-size: 1rem;
  color: #666;
  letter-spacing: 0.01em;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .gradient-text {
    animation: none;
  }
}

// Animated Gradient Text — pure CSS effect, no JS required.
// This script is intentionally minimal; the animation is handled entirely by CSS.
(function () {
  "use strict";
  // The gradient animation runs via CSS @keyframes.
  // You can optionally use JS to dynamically update --gradient-speed:
  // document.querySelector('.gradient-text')?.style.setProperty('--gradient-speed', '5s');
})();

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Animated Gradient Text</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="container">
    <h1 class="gradient-text">Animated Gradient Text</h1>
    <p class="subtitle">Pure CSS animated gradient flowing through text</p>
  </div>
  <script src="script.js"></script>
</body>
</html>

import type { CSSProperties, ReactNode } from "react";

interface AnimatedGradientTextProps {
  children: ReactNode;
  colors?: string[];
  speed?: string;
  className?: string;
  style?: CSSProperties;
}

export function AnimatedGradientText({
  children,
  colors = ["#ff6b6b", "#feca57", "#48dbfb", "#ff9ff3", "#54a0ff", "#5f27cd", "#ff6b6b"],
  speed = "3s",
  className = "",
  style = {},
}: AnimatedGradientTextProps) {
  const gradientStyle: CSSProperties = {
    backgroundImage: `linear-gradient(90deg, ${colors.join(", ")})`,
    backgroundSize: "200% auto",
    WebkitBackgroundClip: "text",
    backgroundClip: "text",
    WebkitTextFillColor: "transparent",
    animation: `gradient-flow ${speed} linear infinite`,
    lineHeight: 1.1,
    ...style,
  };

  return (
    <>
      <style>{`
        @keyframes gradient-flow {
          0% { background-position: 0% center; }
          100% { background-position: 200% center; }
        }
        @media (prefers-reduced-motion: reduce) {
          .animated-gradient-text { animation: none !important; }
        }
      `}</style>
      <span className={`animated-gradient-text ${className}`} style={gradientStyle}>
        {children}
      </span>
    </>
  );
}

// Demo usage
export default function AnimatedGradientTextDemo() {
  return (
    <div
      style={{
        minHeight: "100vh",
        display: "grid",
        placeItems: "center",
        background: "#0a0a0a",
        fontFamily: "system-ui, -apple-system, sans-serif",
        textAlign: "center",
        padding: "2rem",
      }}
    >
      <div>
        <h1
          className="animated-gradient-text"
          style={{
            fontSize: "clamp(2.5rem, 6vw, 5rem)",
            fontWeight: 800,
            letterSpacing: "-0.03em",
            lineHeight: 1.1,
            backgroundImage:
              "linear-gradient(90deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3, #54a0ff, #5f27cd, #ff6b6b)",
            backgroundSize: "200% auto",
            WebkitBackgroundClip: "text",
            backgroundClip: "text",
            WebkitTextFillColor: "transparent",
            animation: "gradient-flow 3s linear infinite",
          }}
        >
          Animated Gradient Text
        </h1>
        <style>{`
          @keyframes gradient-flow {
            0% { background-position: 0% center; }
            100% { background-position: 200% center; }
          }
        `}</style>
        <p style={{ marginTop: "1.25rem", color: "#666", fontSize: "1rem" }}>
          Pure CSS animated gradient flowing through text
        </p>
      </div>
    </div>
  );
}

<script setup>
import { computed } from "vue";

const props = defineProps({
  colors: {
    type: Array,
    default: () => ["#ff6b6b", "#feca57", "#48dbfb", "#ff9ff3", "#54a0ff", "#5f27cd", "#ff6b6b"],
  },
  speed: {
    type: String,
    default: "3s",
  },
});

const gradientColors = computed(() => props.colors.join(", "));
</script>

<template>
  <div
    style="min-height: 100vh; display: grid; place-items: center; background: #0a0a0a; font-family: system-ui, -apple-system, sans-serif; text-align: center; padding: 2rem;"
  >
    <div>
      <h1
        class="animated-gradient-text"
        :style="{ '--gradient-colors': gradientColors, '--animation-speed': props.speed, fontSize: 'clamp(2.5rem, 6vw, 5rem)', fontWeight: '800', letterSpacing: '-0.03em', lineHeight: '1.1' }"
      >
        Animated Gradient Text
      </h1>
      <p style="margin-top: 1.25rem; color: #666; font-size: 1rem;">
        Pure CSS animated gradient flowing through text
      </p>
    </div>
  </div>
</template>

<style scoped>
.animated-gradient-text {
  background-image: linear-gradient(90deg, var(--gradient-colors));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-flow var(--animation-speed) linear infinite;
}

@keyframes gradient-flow {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}
@media (prefers-reduced-motion: reduce) {
  .animated-gradient-text { animation: none !important; }
}
</style>

<script>
export let colors = ["#ff6b6b", "#feca57", "#48dbfb", "#ff9ff3", "#54a0ff", "#5f27cd", "#ff6b6b"];
export let speed = "3s";

$: gradientColors = colors.join(", ");
</script>

<div
  style="min-height: 100vh; display: grid; place-items: center; background: #0a0a0a; font-family: system-ui, -apple-system, sans-serif; text-align: center; padding: 2rem;"
>
  <div>
    <h1
      class="animated-gradient-text"
      style="--gradient-colors: {gradientColors}; --animation-speed: {speed}; font-size: clamp(2.5rem, 6vw, 5rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; padding-bottom: 0.1em;"
    >
      Animated Gradient Text
    </h1>
    <p style="margin-top: 1.25rem; color: #666; font-size: 1rem;">
      Pure CSS animated gradient flowing through text
    </p>
  </div>
</div>

<style>
  .animated-gradient-text {
    background-image: linear-gradient(90deg, var(--gradient-colors));
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-flow var(--animation-speed) linear infinite;
  }

  @keyframes gradient-flow {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
  }
  @media (prefers-reduced-motion: reduce) {
    .animated-gradient-text { animation: none !important; }
  }
</style>

Animated Gradient Text

Text with a flowing animated gradient effect using background-clip: text and CSS @keyframes. The gradient smoothly shifts through multiple colors creating an eye-catching heading effect.

How it works

A large background-size: 200% auto gradient is applied to the text element
background-clip: text and color: transparent make the gradient visible only through the text glyphs
A @keyframes animation shifts background-position from 0% to 200% creating the flowing motion

Customization

Change gradient colors via the CSS custom property --gradient-colors
Adjust animation speed with --gradient-speed (default 3s)
Works with any font size and weight

When to use it

Hero headings and landing page titles
Highlighted keywords or brand names
Call-to-action text that needs extra visual pop