CSS Rainbow Text Animation 🌈

#css #html #webdev #tutorial

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%;
    }
}