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
<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:
- First, we have to define a whole sequence of animation
@keyframes rainbow
. Feel free to change the colors here. - 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
<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.
- 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 CSStransition
to animate a smooth color change.
- Attach a timer to cycle through
instance.colors
oninstance.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
- 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
INFOGRAPHIC CHEAT SHEET

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!