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!

Generate with AI

You can also generate more examples with different gradients using this AI code generator, which quickly creates HTML and CSS web snippets and pages. To get started, just enter "tailwind gradient text" into the message box, send the message and then the web snippet will be generated.

You can also make edits by sending additional messages with the edits you'd like to be made. Be sure to try it out, as you can get lots of cool variations and examples.

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!