Creating Rainbow text with CSS and jQuery

A simple tutorial showing how to create the rainbow text effect with simple CSS and polish it with lettering.js further.

Creating Rainbow text with CSS and jQuery

Rainbow text with CSS is pretty easy thing you can create while playing with the color attribute.

The idea is simple – separate each character in your text with <span> elements, and style them with the help of CSS. One more thing that you need to know (or you might already know) is the colors in the Rainbow. This is important part as it will help you to add perfect rainbow colors to your text.

In case if you don’t know, the Rainbow has 7 colors in it naming Violet, Indigo, Blue, Green, Yellow, Orange, and Red. You can remember all these colors as VIBGYOR, in which each character stands for a color name.

Well, I’m not going to drag you into the whole story of what a Rainbow is, but if you want to know more about it, read this wiki.

Coming back to the topic, see the demo of what we are going to create. Now we know the colors we’ve to play with, lets start coding.

The Markup part

Say we have our text in an <h1> tag, just like below:


Lets separate all the characters in our text with <span>s and give our <h1> tag a class:

<h1 class="rainbow">
    <span class="char1">R</span>
    <span class="char2">A</span>
    <span class="char3">I</span>
    <span class="char4">N</span>
    <span class="char5">B</span>
    <span class="char6">O</span>
    <span class="char7">W</span>

Note that I’ve given a separate class to each span also, that will help styling all the characters individually with rainbow colors.


Following the VIBGYOR concept, lets start adding colors to it.

.rainbow .char1 {
color: violet;

.rainbow .char2 {
color: indigo;

.rainbow .char3 {
color: blue;

.rainbow .char4 {
color: green;

.rainbow .char5 {
color: yellow;

.rainbow .char6 {
color: orange;

.rainbow .char7 {
color: red;

That’s it! Our rainbow text is ready.


Make it more efficient with lettering.js

Lettering.js is a jQuery plugin for radical typography, just like we did above by styling each character differently. How may the plugin help us in our rainbow text effect?

As covered above, we separated each character by a <span> in our markup. It would be great if we do this separation job with JavaScript. Lettering.js comes in handy in such a situation, just write text (just <h2 class="rainbow">rainbow</h2>), add styles for characters and let lettering.js script do rest of that “separating” job.

In long and short, with this plugin, you won’t need to separate the text with span elements. Before proceeding further, make sure you’re using jQuery in your project, as lettering.js is a jQuery plugin.

After downloading the script, call it in your HTML and target our rainbow headline as shown below:

<script src="lettering.js"></script>
$(document).ready(function() {

After this implementation, you can notice by inspecting your code that the script has done done its work seamlessly.

Lettering.js in action: text separated with spans in the DOM

See it in action yourself in the demo.