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
- Create a Div
- Add some text
- Add some basic styling like
font-size
,line-height
etc. - Add a background color
background: linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet, red);
: Rainbow 🌈 - Add this property to the div
background-clip: text
: This makes sure the background is only used for the available text - Add
color: transparent
: This makes sure that the clipped background on text is completely visible. - 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 😊
Top comments (0)