25 CSS Text Animations 02 / 25

CSS Gradient Text Animation

Flowing rainbow gradient text using background-clip: text and an animated background-position shift — a striking modern headline technique.

Pure CSS MIT licensed

Live Demo Open in tab

Open in playground

The code

<div class="ta-02">
  <div class="ta-02__stage">
    <p class="ta-02__eyebrow">Premium Collection</p>
    <h2 class="ta-02__title">Gradient Text<br>Animation</h2>
    <p class="ta-02__sub">background-clip: text · animated background-position</p>
  </div>
</div>

<div class="ta-02">
  <div class="ta-02__stage">
    <p class="ta-02__eyebrow">Premium Collection</p>
    <h2 class="ta-02__title">Gradient Text<br>Animation</h2>
    <p class="ta-02__sub">background-clip: text · animated background-position</p>
  </div>
</div>

.ta-02, .ta-02 *, .ta-02 *::before, .ta-02 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.ta-02 ::selection { background: #818cf8; color: #fff; }

.ta-02 {
  --bg: #05050f;
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  font-family: 'Syne', 'Segoe UI', sans-serif;
}

.ta-02__stage { text-align: center; }

.ta-02__eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #555;
  margin-bottom: 0.75rem;
}

.ta-02__title {
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  background-image: linear-gradient(90deg,
    #f43f5e 0%, #a855f7 20%, #3b82f6 40%,
    #06b6d4 60%, #10b981 80%, #f43f5e 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: ta-02-flow 4s linear infinite;
}

.ta-02__sub {
  font-size: 0.75rem;
  color: #444;
  margin-top: 1rem;
  font-family: 'Courier New', monospace;
  letter-spacing: 0.05em;
}

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

@media (prefers-reduced-motion: reduce) {
  .ta-02__title { animation: none; background-position: 0% center; }
}

.ta-02, .ta-02 *, .ta-02 *::before, .ta-02 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.ta-02 ::selection { background: #818cf8; color: #fff; }

.ta-02 {
  --bg: #05050f;
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  font-family: 'Syne', 'Segoe UI', sans-serif;
}

.ta-02__stage { text-align: center; }

.ta-02__eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #555;
  margin-bottom: 0.75rem;
}

.ta-02__title {
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  background-image: linear-gradient(90deg,
    #f43f5e 0%, #a855f7 20%, #3b82f6 40%,
    #06b6d4 60%, #10b981 80%, #f43f5e 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: ta-02-flow 4s linear infinite;
}

.ta-02__sub {
  font-size: 0.75rem;
  color: #444;
  margin-top: 1rem;
  font-family: 'Courier New', monospace;
  letter-spacing: 0.05em;
}

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

@media (prefers-reduced-motion: reduce) {
  .ta-02__title { animation: none; background-position: 0% center; }
}

How this works

The gradient is applied as a background-image on the text element, then clipped to the text shape using -webkit-background-clip: text and background-clip: text. Setting color: transparent makes the element's text colour invisible, so only the gradient shows through the letter shapes. The gradient is declared wider than the container — 200% auto — to give it room to slide.

The ta-02-flow keyframe animates background-position from 0% center to 200% center, smoothly panning the oversized gradient underneath the clipped text. A background-size: 200% auto declaration ensures the gradient repeats seamlessly at the halfway point, creating a continuous loop with no visible seam.

Customize

Swap colours by editing the gradient stops — try linear-gradient(90deg, #f43f5e, #8b5cf6, #06b6d4, #f43f5e) for a vivid neon palette.
Speed up or slow down the flow by changing the animation-duration on .ta-02__title — 2s is frenetic, 8s is silky.
Change flow direction from horizontal to diagonal using linear-gradient(135deg, ...) and animating background-position from 0% 0% to 100% 100%.
Apply the same technique to any text size — it works from small labels at 0.875rem to hero displays at clamp(4rem, 10vw, 8rem).
Add a subtle text-shadow with the same gradient colours at low opacity for a diffuse glow that makes the text lift off the background.

Watch out for

background-clip: text requires the -webkit- prefix in all browsers including Chrome and Safari; omitting it makes the gradient appear as a rectangle behind the text.
Applying background-clip: text to an element with a non-transparent background-color fills the background; always set background-color: transparent on text elements inside cards.
This technique doesn't work when the text element has display: inline and multiline wrapping in some Safari versions — use display: inline-block or display: block.

Browser support

Chrome	Safari	Firefox	Edge
63+	8+	114+	63+

Firefox only added background-clip: text support in v114; older Firefox shows a solid colour fallback.

More from 25 CSS Text Animations

CSS Fade Up Stagger Text Animation CSS 3D Text Flip Animation CSS Text Stroke Draw Animation CSS Bouncing Letters Animation CSS Blur Reveal Text Animation CSS Perspective Text Rotation Animation CSS Text Shadow Pulse Animation CSS Liquid Fill Text Animation CSS Holographic Text Animation CSS Morphing Text Animation CSS Word Scramble Animation CSS Split Text Explosion Animation

View the full collection →