How to CSS rainbow text

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

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:

/* 
  CSS RAINBOW TEXT 
  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;
			text-shadow: 
				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:

A link to Shireen’s code as well as many other cool css text effects can be found at https://freefrontend.com/css-text-effects/.

TTYL.