How can I make rainbow text?

There are multiple ways to create rainbow text.

1. You can have separate elements. E.G:

<span style="color:#f00">R</span>

<span style="color:#f50">a</span>

<span style="color:#ff0">i</span>

<span style="color:#5f0">n</span>

This would change the colour of each letter individually.

2. Background image and CSS Magic:

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) );

color:transparent;

-webkit-background-clip: text;

}

and now you can do:

<span class="rainbow">Rainbows are colorful and scalable and lovely</span>

or you can use a bit of JavaScript too, this means using method 1 and 2 too:

So here’s how to achieve it. First we need JavaScript to to get the colours.

function color_from_hue(hue)

{

var h = hue/60;

var c = 255;

var x = (1 - Math.abs(h%2 - 1))*255;

var color;

var i = Math.floor(h);

if (i == 0) color = rgb_to_hex(c, x, 0);

else if (i == 1) color = rgb_to_hex(x, c, 0);

else if (i == 2) color = rgb_to_hex(0, c, x);

else if (i == 3) color = rgb_to_hex(0, x, c);

else if (i == 4) color = rgb_to_hex(x, 0, c);

else color = rgb_to_hex(c, 0, x);

return color;

}

function rgb_to_hex(red, green, blue)

{

var h = ((red << 16) | (green << 8) | (blue)).toString(16);

// add the beginning zeros

while (h.length < 6) h = '0' + h;

return '#' + h;

}

Next, you should wrap this into jQuery to make it easy to use.

(function( $ ) {

$.fn.rainbowize = function() {

return this.each(function() {

var rainbowtext = '';

var hue=0;

var step=0;

// get the current text inside element

var text = $(this).text();

// hue is 360 degrees

if (text.length > 0)

step = 360 / (text.length);

// iterate the whole 360 degrees

for (var i = 0; i < text.length; i++)

{

rainbowtext = rainbowtext + '<span style="color:' + color_from_hue(hue) + '">' + text.charAt(i) + '</span>';

hue += step;

}

$(this).html(rainbowtext);

});

};

})( jQuery );

Then to the CSS, we add rainbowize class for webkit browsers.

.rainbowize {

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) );

color:transparent;

-webkit-background-clip: text;

}

And finally connect everything to document’s ready function.

$(document).ready(function() {

if( $.browser.webkit )

$(".rainbow").addClass("rainbowize");

else

$(".rainbow").rainbowize();

});

Now, whenever you write something like

<span class="rainbow">I love rainbows because they are so colourful and pretty!</span>

it will show up as “I love rainbows because they are so colourful and pretty!” and be rainbow coloured beautifully in any browser!