Here is how you can create basic rainbow linear gradient (without integration with text yet):
#grad1 { height: 200px; background: red; /* For browsers that do not support gradients */ background: -webkit-linear-gradient(left, orange , yellow, green, cyan, blue, violet); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(right, orange, yellow, green, cyan, blue, violet); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(right, orange, yellow, green, cyan, blue, violet); /* For Firefox 3.6 to 15 */ background: linear-gradient(to right, orange , yellow, green, cyan, blue, violet); /* Standard syntax (must be last) */ }
<div id="grad1"></div>
Or alternatively, you can use one of the gradient generators (I prefer this one).
And here is the text integration:
#grad1 { background: red; background: -webkit-linear-gradient(left, orange , yellow, green, cyan, blue, violet); background: -o-linear-gradient(right, orange, yellow, green, cyan, blue, violet); background: -moz-linear-gradient(right, orange, yellow, green, cyan, blue, violet); background: linear-gradient(to right, orange , yellow, green, cyan, blue, violet); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 20vw; }
<h1 id="grad1">Fake Text</h1>
Main parts here are background-clip
and text-fill-color
properties, but be ready, that not all browsers will support it. For more info about browser compatibility check sections with the same names near the bottoms of these pages:
P.S. Drawing a line is pretty simple, you just need to use a gradient and define some styles to make this block the right form, for example:
#grad1 { background: red; /* For browsers that do not support gradients */ background: -webkit-linear-gradient(left, orange , yellow, green, cyan, blue, violet); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(right, orange, yellow, green, cyan, blue, violet); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(right, orange, yellow, green, cyan, blue, violet); /* For Firefox 3.6 to 15 */ background: linear-gradient(to right, orange , yellow, green, cyan, blue, violet); /* Standard syntax (must be last) */ } .line { height: 6px; border-radius: 4px; }
<div id="grad1" class="line"></div>