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!

 

 

TLDR – QUICK SLIDES

Fullscreen Mode – Click Here

 

TABLE OF CONTENTS

 

 

CSS JS RAINBOW TEXT

All right, let us now walk through the simple examples of how to create rainbow text.

 

EXAMPLE 1) RAINBOW TEXT WITH CSS ONLY

1A) THE HTML

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

Yep. There is nothing “special” with the HTML, just attach a CSS rainbow class to whatever text that you want to “rainbow”.

 

1B) 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.

 

 

1C) THE RESULT

Some random contents

 

EXAMPLE 2) RAINBOW TEXT WITH JAVASCRIPT

2A) THE HTML

2-js-rainbow.html
<p id="demoA">Some random contents</p>
<p id="demoB">Some other random contents</p>

Yep. Nothing special here either – Just give the text elements an id, so that we can attach the rainbow effect later using Javascript.

 

2B) THE JAVASCRIPT

2-js-rainbow.html
var rainbow = instance => {
  // (A) INIT + DEFAULT SETTINGS
  if (!instance.colors) { instance.colors = ["fc0303", "45f52a", "2a7bf5", "2af5e4", "c92af5", "f5dd2a", "66655d"]; }
  if (!instance.pause) { instance.pause = 1000; }
  if (instance.transit !== false) { instance.target.style.transition = "color ease 0.5s"; }
  instance.now = -1;
 
  // (B) GO!
  instance.timer = setInterval(() => {
    instance.now++;
    if (instance.now >= instance.colors.length) { instance.now = 0; }
    instance.target.style.color = "#" + instance.colors[instance.now];
  }, instance.pause);
};
 
// (C) ATTACH RAINBOW EFFECT ON PAGE LOAD
window.addEventListener("load", () => {
  // (C1) SIMPLE - JUST SPECIFY TARGET
  rainbow({
    target : document.getElementById("demoA")
  });
 
  // (C2) RAINBOW TEXT WITH OPTIONS
  rainbow({
    target : document.getElementById("demoB"),
    colors : ["f00", "0f0", "00f"],
    pause : 2000,
    transit : false
  });
});

So far so good? If you have to support ancient browsers that don’t support CSS animations, here is the Javascript way to do it. This may seem intimidating to some at first, but keep calm and look carefully – var rainbow is a function to attach the necessary rainbow text mechanics.

  1. Notice how we pass an instance object into the function.
    • instance.target Required, the target HMTL element to run the rainbow effect.
    • instance.colors Optional, an array of colors to cycle through.
    • instance.pause Optional, pause in between each color change.
    • instance.transit Optional, use CSS transition to animate a smooth color change.
  2. Attach a timer to cycle through instance.colors on instance.target.

We are pretty much just using an interval timer to cycle through an array of colors, and attaching it to the specified HTML element. The end.

 

 

2B) THE RESULT

Some random contents

Some other random contents

 

DOWNLOAD & NOTES

Here is the download link to the example code, so you don’t have to copy-paste everything.

 

SORRY FOR THE ADS...

But someone has to pay the bills, and sponsors are paying for it. I insist on not turning Code Boxx into a "paid scripts" business, and I don't "block people with Adblock". Every little bit of support helps.

Buy Me A Coffee Code Boxx eBooks

 

EXAMPLE CODE DOWNLOAD

Click here for the source code on GitHub gist, just click on “download zip” or do a git clone. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

EXTRA 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?

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

  • CSS animation is definitely easier to implement.
  • But Javascript offers a lot of room for customization, maybe a random color on every cycle. You can also control how fast/slow each cycle is, without having to do crazy keyframes calculation.

 

COMPATIBILITY CHECKS

These examples should run without any issues – CSS animation is already 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 *