Create Animated Text Gradients with Pure CSS

Animated text gradients with pure CSS?

Yes, it’s possible, and surprisingly smooth.

This technique uses background-clip: text to apply a gradient directly to the text.

It then animates the background to create a subtle shimmering effect.

A few things that make it work:

• Set the text color to transparent so only the background shows through.
• Use background-size: 200% auto to give the gradient space to move.
• Animate the background-position with keyframes to create motion.
• Repeat the first color at the end of your gradient (color1 → color2 → color1) to make the loop seamless.

No JavaScript needed. Just clever layering with modern CSS.

Support is solid across Chromium and WebKit browsers, with Firefox catching up.

Here’s the codepen: https://codepen.io/theosoti/pen/ogNoRPp

To learn more tips about CSS, make sure to join my newsletter below ❤️