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.

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.

 

 

TLDR – QUICK SLIDES

Fullscreen Mode – Click Here

 

TABLE OF CONTENTS

 

 

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.

 

 

 

EXAMPLE 1) RAINBOW TEXT WITH CSS ONLY

1A) THE 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

/* (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

 

EXAMPLE 2) RAINBOW TEXT WITH JAVASCRIPT

2A) THE 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

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

 

 

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

• CSS Keyframes – CanIUse
• CSS Animation – CanIUse
• CSS Transitions – CanIUse

These examples should run without any issues – CSS animation is already well-supported in all modern browsers.

 

 

LINKS & REFERENCES

• Using CSS animations – MDN
• CSS Transition – MDN
• Set Interval – MDN
• Examples On CodePen
  • CSS Rainbow Text
  • JS Rainbow Text

 

INFOGRAPHIC CHEAT SHEET