Rainbow Text With CSS & JS (Simple Examples)

Welcome to a quick tutorial on how to create rainbow text using pure CSS and Javascript. So you want a colorful splash of colors on a certain promotion or message to get the users’ attention… Or maybe you are just too bored and want to add some funky effects to the page.

A block of rainbow text can be easily created with CSS animation.

  • @keyframes rainbow{ 0%{color:red;} 50%{color:green;} 100%{color:blue;} }
  • .rainbow{ animation: rainbow 3s infinite; }
  • <p class="rainbow">TEXT</p>

That covers the basics, but let us walk through more examples – Read on!

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

QUICK SLIDES

 

TABLE OF CONTENTS

Download & Notes Rainbow CSS Rainbow Javascript
Useful Bits & Links The End

 

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

RAINBOW TEXT WITH CSS

All right, let us now walk through how to create rainbow text using pure CSS only.

 

THE HTML

1-css-rainbow.html
<p class="rainbow">Some random contents</p>

Yep… Nothing special with the HTML part. Just attach an appropriate CSS rainbow class.

 

 

THE CSS

1-css-rainbow.html
/* (A) RAINBOW COLOR SEQUENCE */
@keyframes rainbow {
  0% { color: #fc0303 }
  17% { color: #45f52a }
  34% { color: #2a7bf5 }
  51% { color: #2af5e4 }
  68% { color: #c92af5 }
  85% { color: #f5dd2a }
  100% { color: #66655d }
}
 
/* (B) ATTACH RAINBOW EFFECT */
.rainbow {
  animation-name: rainbow;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

Sorry to the guys who are looking for difficult “hacker code” here, this is all we need:

  1. First, we have to define a whole sequence of animation @keyframes rainbow. Feel free to change the colors here.
  2. Next, we simply attach the color sequence to a CSS class.
    • animation-name: rainbow self-explanatory, use the rainbow color sequence.
    • animation-duration to control the speed of the animation.
    • animation-iteration-count: infinite will loop the sequence infinitely.

 

 

THE RESULT

Some random contents

 

RAINBOW TEXT WITH JAVASCRIPT

So far so good? If you somehow have to support ancient or browsers that don’t support CSS animations, here is the Javascript way to do it.

 

THE HTML

2-js-rainbow.html
<p id="thisOne">Some random contents</p>
<p id="thisToo" class="anicol">Some other random contents</p>

Yep. Nothing special here either – Just give the elements an id, so that we can attach the rainbow effect later using Javascript. Also, just take a small mental note on the CSS anicol class here… Will explain that later.

 

THE JAVASCRIPT

2-js-rainbow.html
var rainbow = {
  // (A) SETTINGS
  // preset colors
  colors : ["fc0303", "45f52a", "2a7bf5", "2af5e4", "c92af5", "f5dd2a", "66655d"],
  // animation speed
  pause: 1000,
  // holder for all rainbow elements
  target : {}, 
 
  // (B) INITIALIZE RAINBOW EFFECT
  // el : ID of target element
  init : function (el) {
    rainbow.target[el] = {
      now : -1,
      timer : setInterval(function () {
        rainbow.run(el);
      }, rainbow.pause)
    };
  },
 
  // (C) UPDATE COLOR OF TARGET ELEMENT
  // el : ID of target element
  run : function (el) {
    rainbow.target[el].now++;
    if (rainbow.target[el].now >= rainbow.colors.length) { rainbow.target[el].now = 0; }
    document.getElementById(el).style.color = "#" + rainbow.colors[rainbow.target[el].now] ;
  }
};
 
// (D) ATTACH RAINBOW EFFECT ON PAGE LOAD
window.addEventListener("load", function () {
  rainbow.init("thisOne");
  rainbow.init("thisToo");
});

What the heck!? This may seem to be pretty difficult at first, but var rainbow is an object that holds all the necessary mechanics for the rainbow text. Let us start with the properties:

  • rainbow.colors an array that holds the range of colors.
  • rainbow.pause delay in-between switching the text color.
  • rainbow.target an object that holds all the selected rainbow effect elements.

Also, there are only 2 functions here:

  • rainbow.init() initiates the rainbow text – It simply adds an object to rainbow.target, creates some flags, and starts an interval timer to change the text color.
  • rainbow.run() this is the function called on every cycle to change the text color.

So yep, how we using this script is very easy – Simply call rainbow.init(TARGET) and done.

 

 

THE CSS

2-js-rainbow.html
/* (E) WE CAN USE CSS TO ADD TRANSITION EFFECT */
.anicol { transition: color ease 0.5s; }

I know this is a Javascript solution, but if we only use Javascript, there won’t be any nice transitions. The color switching will be immediate and won’t look very nice. This single line of CSS will add a nice transition to the color switch if CSS animation is enabled – So, why not?

 

THE RESULT

Some random contents

Some other random contents

 

USEFUL BITS & LINKS

That’s all for this guide, and here is a small section on some extras and links that may be useful to you.

 

CSS OR JAVASCRIPT – WHICH IS BETTER?

The CSS solution is definitely easier to implement. But why would someone be dumb enough to use Javascript? Well, not that the Javascript is bad. It does offer a lot of room for customization, maybe a random color on every cycle, and it is also compatible with browsers that don’t do CSS animation.

Both solutions will work equally well, it’s just about choosing the right one that fits the best for your project.

 

COMPATIBILITY CHECKS

CSS animation is actually very well supported in all modern browsers.

 

LINKS & REFERENCES

 

INFOGRAPHIC CHEAT SHEET

How To Create Rainbow Text In JS CSS (click to enlarge)

 

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

Your email address will not be published. Required fields are marked *