How to CSS rainbow text

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

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:

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

  • “Now THAT was a good meeting!”
    A single effective meeting can change the course of history for a company. Imagine if you could lead effective meetings EVERY DAY! You can, but it takes curiosity & practice. This article is a good place to start your journey to a more effective you.
  • Never Respond to RFPs & Custom Proposal Requests
    Y'all who work at normal 9-5 jobs don't need to deal with the B.S. that is an RFP process (or rather you get paid to deal with it). But us freelancers gotta deal with a whole big bag of schtuff when it comes to custom proposals. Here's my quick-and-dirty RFP filtering process that I use […]
  • What content should I put on my homepage?
    I see websites as one stop of many on the sales journey, useful to help get customers from Point A to Point B in the sales process (or maybe from Point D to Point E).  If you are wondering about what to put on your homepage, start with these basic sales-related questions: Who, specifically, will…

More posts from themightymo.com

How to Connect a GoDaddy Site to ManageWP

By The Mighty Mo! Design Co. | June 27, 2022

GoDaddy owns ManageWP, and, strangely, they make it very difficult to add GoDaddy-managed WordPress sites to their ManageWP service. Thankfully, there’s a quick workaround: Visit https://yoursite.com/wp-admin/plugins.php?showWorker=1 — This will make the ManageWP “Worker” plugin visible. Copy the connection info from the ManageWP Worker plugin. Add the site per-normal on ManageWP. That’s it! I hope this…

How to check if your current page is the wp-login.php page

By The Mighty Mo! Design Co. | June 7, 2022

I realized this morning that my TMM Maintenance Mode WordPress plugin had a bug that was causing the wp-login.php page to be inaccessible. The solution was to write a simple function that checks whether or not we’re currently on a login page, and then add a call to that function in my code. Here’s the…

woocommerce logo

WooCommerce Product Image Gallery Not Loading with WP Rocket Active

By The Mighty Mo! Design Co. | June 6, 2022

Today I updated a WooCommerce site, and everything worked fine, except for the images on product pages – they were not displaying at all. After a lot of trial & error, I realized that WP Rocket was to blame. I’m not sure exactly what the issue was (though my hunch is that it had to…

RSS From Toby’s Blog

  • “Now THAT was a good meeting!”
    A single effective meeting can change the course of history for a company. Imagine if you could lead effective meetings EVERY DAY! You can, but it takes curiosity & practice. This article is a good place to start your journey to a more effective you.
  • Never Respond to RFPs & Custom Proposal Requests
    Y'all who work at normal 9-5 jobs don't need to deal with the B.S. that is an RFP process (or rather you get paid to deal with it). But us freelancers gotta deal with a whole big bag of schtuff when it comes to custom proposals. Here's my quick-and-dirty RFP filtering process that I use […]
  • What content should I put on my homepage?
    I see websites as one stop of many on the sales journey, useful to help get customers from Point A to Point B in the sales process (or maybe from Point D to Point E).  If you are wondering about what to put on your homepage, start with these basic sales-related questions: Who, specifically, will…