CSS Rainbow Text

Example of CSS Rainbow Text

In this article, we’ll talk about what is a Rainbow text and demonstrate building one through a basic example

Rainbow Text is a text with a color pattern associated with it, representing the 7 colors of Rainbow; namely Violet, Indigo, Blue, Green, Yellow, Orange, and Red.

Using different tricks, the pattern can be applied to any color property such as color, border, or shadow. Mostly, it is the color.

Let’s start writing basic HTML and CSS for building different types of Rainbow texts.

<p class="rainbow-text">Hi, I'm a Rainbow Text</p>

To give it a rainbow background, we will first give the whole element a background gradient.

  background-image: linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red);

We don’t want the background gradient to cover the entire element background gradient, rather be clipped to the text.

  -webkit-background-clip: text;

Setting the background-clip property to text is non-standard but happens to be well supported in modern browsers, with the exceptions of IE and Opera Mini, which aren’t widely used. You can find the support details here. The -webkit-background-clip prefix is required by some modern browsers and supported by the remainder so it’s OK to just use the prefix if you want minimal CSS. To be on the safe side, it’s probably best to futureproof it by including the unprefixed background-clip property as well.

The rainbow pattern is there but we can’t really see it until we set the text’s own color as transparent.

 color: transparent;

So our final CSS will be (along with other deemed-as-necessary adjustments)


.rainbow-text {
background-image: linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red);
color: transparent;
background-clip: text;
-webkit-background-clip: text;
}

The background-image property accepts the following types of gradients

More on background-image here.

Using this combination of background-image and background-clip property values, we can create countless variations of Rainbow texts. Some of them will be shown in the Codepen to follow.

In some cases, you may need to show rainbow colors one by one for a text, and loop it infinitely. This can be achieved by applying an animation that changes the colors and then repeats.

@keyframes rainbow{
0%{color: orange;}
10%{color: purple;}
20%{color: red;}
30%{color: CadetBlue;
40%{color: yellow;}
50%{color: coral;}
60%{color: green;}
70%{color: cyan;}
80%{color: DeepPink;}
90%{color: DodgerBlue;}
100%{color: orange;}
}

We can use the power of multiple text shadows to create a rainbow shadow pattern. 

 font-size: 70px;
font-weight: 100;
color: #ef3550;
letter-spacing: 8px;
text-shadow: 1px 0 #f48fb1, 2px 0 #7e57c2, 3px 0 #2196f3, 4px 0 #26c6da, 5px 0 #43a047, 6px 0 #eeff41, 7px 0 #f9a825, 8px 0 #ff5722, -1px 0 #f48fb1, -2px 0 #7e57c2, -3px 0 #2196f3, -4px 0 #26c6da, -5px 0 #43a047, -6px 0 #eeff41, -7px 0 #f9a825, -8px 0 #ff5722;

 The shadows may not be very useful but there could be some possible use cases.

<span class="rainbow-text">I'm a Linear Rainbow Text</span><br>
<span class="rainbow-text">I'm a Radial Rainbow Text</span><br>
<span class="rainbow-text">I'm a Conic Rainbow Text</span><br>

<span class="rainbow-text-loop">I'm a Text With Rainbow Color Transitions</span><br>

<span class="rainbow-text-shadow">I'm a Text With a Rainbow Shadow</span><br>
body { font-family: sans-serif; }

.rainbow-text {
  font-size: 3rem;
  background-image: linear-gradient(to right, violet, indigo, blue, green, yellow, orange, red);
 color: transparent;
  -webkit-background-clip: text;
  display: inline-block;
  margin-bottom: 2rem;
}

.rainbow-text:nth-of-type(2) {
   background-image: radial-gradient(circle, violet, indigo, blue, green, yellow, orange, red);
 color: transparent;
}

.rainbow-text:nth-of-type(3) {
   background-image: conic-gradient(from 90deg, violet, indigo, blue, green, yellow, orange, red);
 color: transparent;
}

.rainbow-text-loop {
  font-size: 2rem;
  display: inline-block;
  margin-top: 1rem;
  text-shadow: 2px 2px 4px #000000;
  -webkit-animation: rainbow 5s infinite; 
}

@-webkit-keyframes rainbow{
  0%{color: orange;}	
  10%{color: purple;}	
	20%{color: red;}
  30%{color: CadetBlue;}
	40%{color: yellow;}
  50%{color: coral;}
	60%{color: green;}
  70%{color: cyan;}
  80%{color: DeepPink;}
  90%{color: DodgerBlue;}
	100%{color: orange;}
}


.rainbow-text-shadow {
  display: inline-block;
  margin-top: 2.5rem;
  font-size: 70px;
  font-weight: 100;
  color: #ef3550;
  letter-spacing: 8px;
  text-shadow: 1px 0 #f48fb1, 2px 0 #7e57c2, 3px 0 #2196f3, 4px 0 #26c6da, 5px 0 #43a047, 6px 0 #eeff41, 7px 0 #f9a825, 8px 0 #ff5722, -1px 0 #f48fb1, -2px 0 #7e57c2, -3px 0 #2196f3, -4px 0 #26c6da, -5px 0 #43a047, -6px 0 #eeff41, -7px 0 #f9a825, -8px 0 #ff5722;
}

Conclusion

In this article, we went through how we can create variations of rainbow texts using powerful CSS properties. Note that the properties are generic, so the rainbow pattern is one of the many color patterns you can create using these properties.