How does the gradient actually move across the text?

The gradient is set as a background that's much wider than the text (background-size around 300-400%), and a @keyframes animation slides background-position from one edge to the other, so a fixed-size window of the oversized gradient appears to sweep across the letters.

Why does it need background-clip: text and a transparent color?

background-clip: text (with the -webkit- prefix for wider support) clips the gradient background to the shape of the glyphs, and setting the text color to transparent hides the normal fill so the moving gradient shows through instead.

Why make the background-size bigger than 100%?

If the gradient exactly matched the text width, animating background-position would just slide the same visible colors sideways with a visible seam; oversizing it means the animation reveals a genuinely different slice of the gradient at each moment, which is what makes the color blend look like it's actually flowing.

Will this look right if someone's browser doesn't support background-clip: text?

The CSS includes a transparent-text fallback, so in a non-supporting browser the text can render invisible against most backgrounds — this effect is best used for decorative headlines rather than text that must always be legible, and current Chrome, Firefox, Safari, and Edge all support it.

Does the animation respect reduced-motion preferences?

Yes — the generated CSS wraps the animation in @media (prefers-reduced-motion: reduce) and falls back to a static gradient, and everything is computed locally with nothing uploaded.

ANIMATED GRADIENT TEXT GENERATOR

Fill a headline with a gradient that drifts across the letters and copy the CSS.

In short

This generator fills text with a multi-color linear gradient that slides across the letters in a loop. You get copy-ready CSS (background-clip: text plus a @keyframes animation, with a prefers-reduced-motion fallback) and a one-line HTML snippet, built from one of six presets or your own 2–4 colors, angle, speed, and spread. Everything is generated in your browser; nothing is uploaded.

Animated Text

TextGradient colors

Angle: 90deg

Speed: 6s

Spread: 300%

Presets

CSS

.gradient-text-animated {
  background: linear-gradient(90deg, #ff6a35, #ffb347, #ff3d68);
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: gradient-text-move 6s linear infinite;
}

@keyframes gradient-text-move {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .gradient-text-animated {
    animation: none;
    background-position: 0% 50%;
  }
}

HTML

<span class="gradient-text-animated">Animated Text</span>

Example output (default settings)

CSS

.gradient-text-animated {
  background: linear-gradient(90deg, #ff6a35, #ffb347, #ff3d68);
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: gradient-text-move 6s linear infinite;
}

@keyframes gradient-text-move {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .gradient-text-animated {
    animation: none;
    background-position: 0% 50%;
  }
}

HTML

<span class="gradient-text-animated">Animated Text</span>

How to build animated gradient text

1
Type your headline text.
2
Pick a color preset or edit each gradient stop.
3
Drag the angle and background-size sliders to shape how the gradient sweeps.
4
Set the animation speed — slower reads as ambient, faster as energetic.
5
Copy the CSS and HTML — the animation uses @keyframes to shift background-position.

Questions

How does the gradient actually move across the text?: The gradient is set as a background that's much wider than the text (background-size around 300-400%), and a @keyframes animation slides background-position from one edge to the other, so a fixed-size window of the oversized gradient appears to sweep across the letters.
Why does it need background-clip: text and a transparent color?: background-clip: text (with the -webkit- prefix for wider support) clips the gradient background to the shape of the glyphs, and setting the text color to transparent hides the normal fill so the moving gradient shows through instead.
Why make the background-size bigger than 100%?: If the gradient exactly matched the text width, animating background-position would just slide the same visible colors sideways with a visible seam; oversizing it means the animation reveals a genuinely different slice of the gradient at each moment, which is what makes the color blend look like it's actually flowing.
Will this look right if someone's browser doesn't support background-clip: text?: The CSS includes a transparent-text fallback, so in a non-supporting browser the text can render invisible against most backgrounds — this effect is best used for decorative headlines rather than text that must always be legible, and current Chrome, Firefox, Safari, and Edge all support it.
Does the animation respect reduced-motion preferences?: Yes — the generated CSS wraps the animation in @media (prefers-reduced-motion: reduce) and falls back to a static gradient, and everything is computed locally with nothing uploaded.

Related tools

All Color & CSS Tools →

Updated October 11, 2026