How to create rainbow text in HTML & CSS & JavaScript

Update February 4th, 2014: Added a way to use Modernizr to detect the backgroundclip support, since jQuery 1.9 has dropped the support for $.browser.

Rainbows are colorful things. They make wonderful backgrounds, logos, but I think they are especially cool in texts. I’m certain that many people would like to use them in their web sites, but until lately there hasn’t been a easy and reliable way to achieve it.

In this post I introduce three ways to create rainbow texts for web.

1. Image editor

Almost any image editor is capable of creating Rainbow Text. Gimp, Pixelmator, Photoshop – maybe anything except MS Paint. Just create a text and apply gradient for it. The exact way to achieve this varies depending on application you use, so I won’t be going into details here. Basically you create image and use it:

However, this way has two big problems: the text won’t be searchable and the text will be difficult to change.

In other words, we should avoid this way.

2. Separate elements

More straightforward way is to create the text with separate elements. It means wrapping each letter in it’s own element.

Rain

As you can see, it’s definitely NOT meant to be done manually. Basically you need to write some javascript to generate the codes. We’ll take a look into that later.

3. CSS magic

The best way I have found is with CSS, because text will be easy to read and modify after you hide the style to .css file. This way includes creating a gradient that we use as background, and then clipping mask with text that shows background only where text is present.

With above text we can do:


Rainbows are colorful and scalable and lovely

This method works without JavaScript and is the cleanest solution because it’s just few simple lines of CSS.

Note: If you use this in any other than display:inline element (such as span), it will spread the spectrum across the whole width, which may make it not making it not so rainbowish. For example:

Not rainbow!

You can get around this with span element:

Colorful rainbow.

However, even this way is not perfect, and there’s one there’s this one weak point: Older browsers do not support it! More information here

Since we need this to run perfectly in all browsers, we need…

THE ULTIMATE RAINBOW SOLUTION!

In other words, use CSS if browser supports it, or use JavaScript if not.

This means using both methods, 2 and 3.

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

This has some mysterious looking HSL conversion math behind it. If you are interested about the details, check what Wikipedia says about converting HSL to RGB.

Next, we can wrap this into jQuery to make it easy to use.

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

Detecting the support

Old versions of jQuery contained checks for browser support, such as webkit or firefox, but even then you could never be sure if the browser supports it. To detect if the browser support is available, we need to use Modernizr.

You can download the latest version from here: http://www.modernizr.com/downloads/modernizr-latest.js.

Then include it into your page.

However, modernizr does not contain test for background-clip by default, so you should add one:

Basically this means, that if the support exists, it will add “backgroundclip” class for the html element. Finally we connect everything to document’s ready function.

Now, whenever you write something like

it will show up as “I love rainbows because they are so colorful!” and will look like rainbow in any browser.

18 Responses to “How to create rainbow text in HTML & CSS & JavaScript”

  1. jayjfadd

    Sweet stuff!

    Reply
  2. Justin

    Hey, I’m trying to utilize your code in a website I’m rewriting for my school but I’m still pretty new to html/css/JS and I’m having trouble figuring out how to organize all the code above. I’ve got an external CSS file that I tried putting the given css code in, and then made an external JS file to hold all the JS code. Could you possibly help?

    Thanks so much for posting this, the css works great in Chrome and looks awesome, I just know this site will be used by other browsers

    Justin

    Reply
  3. Brandon Cook

    Hi, working on a site, and simply wondering, would I be able to use this with a custom font? If so, how would that be done?

    Reply
  4. grmbl

    Nice, simple and effective. Thanks for sharing! +fav

    Reply
  5. Laurent

    +1 thanks for sharing

    Reply
  6. Nathan

    SO SWEET!
    i was searching this for 1 hours :D

    Reply
  7. Make Rainbow-Colored Lists (and other HTML elements) – jQuery plugin | A Web Coding Blog

    [...] to make rainbow-colored lists? I started searching for a solution and found a plugin for rainbow text, which inspired me to write my own jQuery plugin to rainbow-ify lists and other sets of HTML [...]

    Reply
  8. Olive the HTML Whiz

    I do a bunch of HTML coding stuff for a hobby, and right now, I’m in the middle of making a web site from scratch, using MS Word. So far, so good! I found that option nĂºmero dos suited my needs the best. If you’re using HTML to format text like me, you should check out http://www.computerhope.com/htmcolor.htm for even MORE colors, from gunmetal to blossom pink, EVER. SINGLE. COLOR. Hope this helps!!!!

    Reply
  9. Olive the HTML Whiz

    Ok guys, I found a site that is even BETTER….no offense to the mods of this one but CHECK THIS ONE OUT!! http://rainbow.arch.scriptmania.com/tools/rainbow_text/

    It’s very helpful!

    Reply
  10. Ann

    Found a Pure CSS rainbow at
    http://www.thingography.com/Animation/Rainbow/
    with CSS code displayed

    Reply
  11. kazirhut

    very useful stuff. thnx for share.

    Reply
  12. Martyn

    I’m trying to use this on a website I am developing, but can only get the CSS method to work in chrome and safari. I cannot get the rainbow effect to work on IE or Firefox. It’s the same for this page in IE and Firefox, the rainbow effect just wont show up. Is this a known problem or something that’s changed recently?

    Reply
  13. Lloyd Henning

    An important web design article – good work.

    Reply
  14. Ghulam Muhammad

    Only works in webkit. Any way to make it work on gecko browsers?

    Reply
  15. big ma

    what the fucjk

    yu5rjyhki98

    \’vh;iebh bi

    Reply
  16. Luki

    Funny, how you wanted it to work everywhere and it doesn’t work in latest Mozilla Firefox. Only “separate elements” is visible using this browser. Not a single one more. Had to use Opera to see your code changes and stuff.

    Reply
  17. Autchet

    Hi ^^ I’m trying to use the javascript code, but all of my writing except the first line of text turns white when I apply the rainbow D: why is this happening?

    Reply

Leave a Reply