Welcome! If you'd like to create a gradient text animation in CSS, then you've arrived at the right guide!

In just three steps, you'll have a cool text animation, created with CSS.

Here's what it looks like:

Let's get started!

Step 1. Create Text Element

Firstly, create the text element in HTML that will display the gradient animation. In this example, we'll be creating a h1 element:

<h1 class="gradientText">Gradient text animation</h1>

Step 2. Add Gradient to Text

Next up, let's create the gradient and apply it to the text:

.gradientText {
  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #caa256 100%);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 300%;
  animation: animated_gradient_text 12s ease-in-out infinite;
  -moz-animation: animaanimated_gradient_textted_text 12s ease-in-out infinite;
  -webkit-animation: animated_gradient_text 12s ease-in-out infinite;
}

In the CSS above, we're creating a linear gradient and setting it as the background image of the element. Then, the size of this is updated to be 300%, so that when the gradient is animated, the background image will then appear to be moving.

Then, the background-clip property specifies that the gradient background should extend to the text. When the text's color is set to transparent, the gradient from underneath will then appear, thus making it appear like the text has a gradient fill effect. It's quite a cool effect, I must say!

Step 3. Add Keyframe Animation

Finally, it's time to animate the gradient. Just add the following keyframe animation to your CSS, which will move the background position of the gradient from left to right. If you'd like to edit the duration, simply edit the 12s value in the animation CSS above to your new duration.

@keyframes animated_gradient_text {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

Here's what it looks like:

Here's the full example, containing the HTML and CSS:

<h1 class="gradientText">Gradient text animation</h1>

<style>
.gradientText {
  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #caa256 100%);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 300%;
  animation: animated_gradient_text 12s ease-in-out infinite;
  -moz-animation: animaanimated_gradient_textted_text 12s ease-in-out infinite;
  -webkit-animation: animated_gradient_text 12s ease-in-out infinite;
}

@keyframes animated_gradient_text {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
</style>

This could be useful for creating striking hero headlines or for animating call-to-action text and much more. I'd also recommend experimenting with different gradients to see which would work best for your use case, as well as trying out various durations too. There are so many cool possibilities, which are very fun to try out!

Conclusion

I hope that you've found this guide useful for helping to build animated CSS text gradients.

If you'd like to read more, I've also written a tutorial about how to create an animated gradient button effect too, so if you're interested, be sure to take a look.

Thanks very much for reading!