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:

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

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 https://freefrontend.com/css-text-effects/.

TTYL.

The Mighty Mo! Design Co.

RSS From Toby’s Blog

More posts from themightymo.com

WordPress Support

The Ultimate Guide to WordPress Support: Why it’s Essential for Your Website’s Success

By The Mighty Mo! Design Co. | September 25, 2023

Whether you’re situated in Minneapolis, St. Paul, Illinois, New York, or any other corner of the globe, ensuring reliable WordPress Support is paramount for the continued success of your website. In this comprehensive guide, we will delve into the crucial role that WordPress support plays in your website’s journey to success.

sem rush log file analyzer

How to optimize your Google Crawl Budget using SEM Rush Log File Analyzer and Rank Math SEO

By The Mighty Mo! Design Co. | September 22, 2023

Today I ran the SEM Rush Log File Analyzer tool, and it showed some interesting things that are a complete waste of our Google Crawl Budget. Specifically, I learned that Google is wasting some of our crawl budget on the /wp-includes/ directory, certain plugin directories, and cache directories. I also noticed random files being crawled…

google analytics definitive guide

Where is the Google Analytics Measurement ID?

By Toby Cryns | August 16, 2023

In the vast, evolving world of web development and analytics, keeping up with terminologies and tools can sometimes feel like trying to chase a mischievous cat in a maze. You think you’ve got a grip, only for it to slip right through your fingers! Enter the mysterious “Measurement ID” from Google Analytics 4 (GA4), a…

RSS From Toby’s Blog