Type your headline, pick a gradient, and watch the colors shimmer across the letters in real time. Tune the angle, size, weight and speed, then copy the CSS and HTML.
Real background-clip text with an oversized gradient sliding behind it, not a static two-tone heading.
Add a middle color for a richer, more dynamic shift across your text.
Angle, size, weight and animation speed all update the preview instantly.
Get the CSS including the @keyframes rule, plus the minimal HTML markup.
Animated gradient text works by treating a block of text as a mask for a moving background image. The gradient itself is set much wider than the element using background-size, so most of it sits off to the sides at any given moment; animating background-position slides that oversized gradient left and right, and because the text clips it, the visible colors appear to flow smoothly across the letters. The technique needs only two non-standard-sounding but well-supported properties, background-clip: text and text-fill-color: transparent, plus the -webkit- prefixed versions for broader compatibility. No JavaScript, canvas or image assets are involved, which keeps the effect crisp at any screen size and cheap to render.
Making the gradient twice as wide as the text gives the animation room to slide without ever showing a hard edge or repeat seam.
Animating background-position from 0% to 100% and back creates a smooth back-and-forth shimmer rather than an abrupt jump.
Heavier weights show off gradient transitions more clearly, since thin strokes leave less room for color to read.
Always keep a solid color declaration before the gradient rules so text stays visible if background-clip: text is unsupported.
The gradient is set as a background clipped to the text shape with background-clip: text and a transparent text fill color. Making the background-size much larger than the element and animating background-position with a @keyframes rule creates the shifting color effect.
Make sure both background-clip: text and the -webkit-background-clip: text prefix are present, along with -webkit-text-fill-color: transparent, since some browsers still require the prefixed properties for text clipping.
This tool supports 2 or 3 stops to keep the animation reading cleanly. After copying the CSS you can edit the linear-gradient function directly to add more stops if you want a busier effect.
Yes. Turning off Animate keeps a static gradient-filled heading; only the background-position keyframe animation is removed from the copied CSS.
Keep exploring text effects with these free generators.