The rainbows are always beautiful because of their 7 colors. But, have you ever thought that we can fill those 7 colors in our text?
Well, it’s pretty easy and in this tutorial, we will learn an easy method to create a rainbow text using CSS.
In case you don’t know, the rainbow has 7 colors naming Violet, Indigo, Blue, Green, Yellow, Orange & Red. To fill these 7 colors in our text we will make use of CSS gradients which we can create using CSS linear-gradient() function.
Now to fill this 7 colors linear gradient in the text, we have to apply it as a background-image on the target element.
Here is a working example:
Example:
div{
background-image: linear-gradient(to right, violet, indigo, blue, green, yellow, orange, red);
-webkit-background-clip: text;
color: transparent;
}
You can also start the rainbow colors with Red and end with the Violet by simply changing the gradient direction from right to left.
This is how you can do it:
Example:
div{
background-image: linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red);
-webkit-background-clip: text;
color: transparent;
}
