DEV Community

Cover image for Rainbow text with CSS
Trishul for Itsopensource

Posted on • Originally published at itsopensource.com

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:

Rainbow colored text

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;
}
Enter fullscreen mode Exit fullscreen mode

DEMO

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

Hope this helps 😊

Top comments (0)