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

https://itsopensource.com/rainbow-text/#:~:text=DEMO

Hope this helps 😊