Rainbow text with CSS

Some designers can not get enough of colors and want the text not to be in solid color but rainbow colors. Traditionally developers achieve this by using a PNG image, something like this:

But with modern day CSS, this can be achieved with just few CSS rules.

How

1. Create a Div
2. Add some text
3. Add some basic styling like font-size, line-height etc.
4. Add a background color background: linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet, red);: Rainbow 🌈
5. Add this property to the div background-clip: text: This makes sure the background is only used for the available text
6. Add color: transparent: This makes sure that the clipped background on text is completely visible.
7. That’s it 😎

Code

.rainbow-text {
   background: linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet, red);
   background-clip: text;
   color: transparent;
   font-size: 40px;
}

DEMO

Right click and inspect the text above and observe the CSS in inspector.