Select Page

Rainbow-Colored Headline – pure CSS

This crazy times need more colors! I made a CSS-only rainbow-colored headline and want to share it with you. So here is an easy tutorial... A simple start into CSS Drawings

I found this heading somewhere on the internet and thought it was very pretty. So I tried to recreate it. Although it was a little tricky, it also was a lot of fun.

Here is the guide. Have fun building!

And if you want to see the result, you can find it on CodePen.

The HTML

First of all, you need a headline.
We use the H1 tag for our headline. I gave the tag an additional class ‘rainbow‘, but you can actually leave it out.

<h1 class=“rainbow”>Hej, I am FridaD</h1>

The CSS

You design this text with a very large font-size and a high font-weight. I chose a font size of 5em and a font-weight of 900.

h1, .rainbow {
font-family: Ubuntu;
font-size: 5em;
font-weight: 900;
}

If you want a special font, just drop by Google fonts and find a nice font. The easiest way to integrate this into your CSS script.
I chose the Ubuntu font, which I also use on this website.

Before we start styling the text, let’s first center it. You don’t have to do that, of course, but it looks nicer.

For this we give our heading ‘h1’ a ‘position: absolute‘. Positioning with ‘absolute’ releases the element, i.e. the headline, from the natural document flow. So you can put it right where you want it.

In this example we set the heading 150px from top. To center it we use the attribute ‘left: 50%’. Now the element is not quite in the middle, we use ‘transform: translate (-50%)‘ for this.

Voila, it’s in the middle of the page!

The CSS code should now look like this:

h1, .rainbow {
position: absolute;
margin-top: 150px;
left: 50%;
transform: translate(-50%);
font-family: Ubuntu;
font-size: 5em;
font-weight: 900;
}

Let’s start with the real work: the rainbow

First of all, we need a gradient background.

CSS gradients let you display smooth transitions between two or more specified colors. If you want to know more about it, you can find a good explanation at W3School.
And at this CSS Gradient website, you can generate your gradient background.

background: linear-gradient( 90deg, #454f5b 0%, #688298 15%, #ee7898 30%, #e6ed8e 45%, #9ccdb4 60%, #778399 75%, #ed9ab0 100% );

Here you have a background-element with a linear gradient. The first value (90deg) determines the direction of the gradient. After that, you determine the gradient colors and values. Here you can play with different colors and values until you like the result.

I used the colors I use on my website and liked the result.

Now it should look somewhat like that:

Not quite what we want, right?! So we have to turn it over now. For this, we use ‘background-clip’.
The background-clip: text CSS property sets whether an element’s background extends underneath its border-box, padding-box, or content-box.

But that’s not enough. In order to let the headline show through, we need the property ‘-webkit-text-fill-color: transparent‘.
The CSS property ‘-webkit-text-fill-color‘ determines the fill color of text characters.

!! No standard
This function does not correspond to the standard and is not part of the standardization. This function should not be used in websites that are accessible via the Internet: it will not work for all users.
So you shouldn’t use this fun CSS example like this without a well-functioning alternative on websites.

The whole CSS code

h1, .rainbow {
position: absolute;
margin-top: 150px;
left: 50%;
transform: translate(-50%);
font-family: Ubuntu;
font-size: 5em;
font-weight: 900;
background: linear-gradient( 90deg, #454f5b 0%, #688298 15%, #ee7898 30%, #e6ed8e 45%, #9ccdb4 60%, #778399 75%, #ed9ab0 100% );
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

DONE 🙂