In this tutorial, we'll make a simple CSS rainbow text animation.

Click here to checkout the source code for this tutorial.

HTML

In the index.html file, we'll only need an h1 tag with text.

<h1>Superdev.</h1>  

CSS

Our CSS file will include the h1's basic styling as well as the code for animating the text.

Styling the text

h1 {     background-clip: text;     background: url('https://vivaldi.com/wp-content/uploads/colors-1024x656.png');     -webkit-background-clip: text;     -webkit-text-fill-color: transparent;     animation: text 3s linear infinite; } 

Because no animations have been applied up to this point, our text will look like this:

Adding animations

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

That's it 🎉

You should see something like this when you open the index.html file in your browser.