How to CSS rainbow text

Today I needed to convert some WordPress text into a rainbow using CSS. Here’s the result:

css rainbow text
screengrab of my css rainbow text

After bumbling about a bit, I discovered Shireen Taj’s excellent css rainbow text code. After altering some of the colors and adding an outline to the top layer, my resulting code looked like this:

  NOTE: ".post-1678" is a specific post in WordPress I was targeting.  You can replace ".post-1678 header h1" with whichever html element you are targeting.
.post-1678 header h1{
	    text-align: center;
	    color: #fff;
		  font-size: 90px;
	    -webkit-text-stroke: 2px black;
      text-shadow: 5px 5px 0px #D20004,
				10px 10px 0px #FB4A25, 
				15px 15px 0px #FEF80C, 
				20px 20px 0px #18B202, 
				25px 25px 0px #0F86FE, 
				30px 30px 0px #00006F, 
				35px 35px 0px #fff, 
				40px 40px 0px #fff, 
				45px 45px 0px #fff;
@media only screen and (max-width: 710px) {
  .post-1678 header h1{
		  font-size: 40px;
		  -webkit-text-stroke: 1px black;
				3px 3px 0px #D20004,
				5px 5px 0px #FB4A25, 
				7px 7px 0px #FEF80C, 
				9px 9px 0px #18B202, 
				11px 11px 0px #0F86FE, 
				13px 13px 0px #00006F, 
				15px 15px 0px #fff, 
				17px 17px 0px #fff, 
				19px 19px 0px #fff;

Here’s what it looks like on mobile view:

css rainbow text mobile
How to CSS rainbow text 3

A link to Shireen’s code as well as many other cool css text effects can be found at


Toby Cryns

Toby Cryns is a freelance CTO, expert WordPress consultant, and teacher.

He offers free advice to improve your freelance biz.

He also publishes small droppings every now and then to and

Follow Toby's contributions on Github and