CSS rainbow gradient text

Question

What would be the best way to achieve this design in CSS?

and this:

Thanks for your help!

Answer 1

Here's how you can create a basic linear rainbow gradient (without integration with text so far):

#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 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> 

The main parts here are the background-clip and text-fill-color properties, but be prepared that not all browsers will support it. For more information on browser compatibility, check the sections with the same name at the bottom of these pages:

background clip

color fill text

PS Line drawing is pretty simple, you just need to use a gradient and define some styles to make this block a regular shape, 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> 

Answer 2

If you need the same gradient for the text, use something like this.

  h1 { background: linear-gradient(to right, orange , yellow, green, cyan, blue, violet); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 60px; line-height: 60px; } 

 <h1>100% Unicorn</h1> 

But fill text is not supported in Internet Explorer. Therefore, it might be better to use transparent png or svg in the foreground.

Answer 3

I tend to use this gradient generator . Add colors at different points and use the rotation option.

This will generate CSS for you.

Answer 4

In the CSS file:

 .rainbow { background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) ); background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) ); color:transparent; border: 2px dotted white; -webkit-background-clip: text; background-clip: text; } 

Result