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

  • Where uncertainty exists, don’t order specific.
    4 Idiot Case Studies with 2 simple age-old business lessons. The post Where uncertainty exists, don’t order specific. appeared first on Toby Cryns, WordPress Trainer in Minneapolis, MN.
  • “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. The post “Now THAT was a good meeting!” appeared first […]
  • 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 […]

More posts from themightymo.com

How to merge two folders, including all sub-folders and files, on Mac

By The Mighty Mo! Design Co. | November 3, 2022

Today I had an issue where I needed to merge two folders, each of which contained many sub- and sub-sub folders that had lots of images. After a lot of trial-and-error and some Googling, I found the best solution is to use the “ditto” command in Terminal like this: That’s it! Hat tip to AppleInsider.

mailchimp usage stats

Some Surprising Trends in Website Development

By Toby Cryns | October 17, 2022

I wasted some time today to bring you (dum dum duuuuum!): Some Surprising Trends in Website Development!

How to Configure WordPress with Cloudflare, HSTS, TLS, and Secure Headers

By The Mighty Mo! Design Co. | October 11, 2022

I was recently asked to look into creating some secure http headers as well as forcing a website to load over TLS1.2+. Below are my “how to” instructions for updating these settings within WordPress and Cloudflare. Install & Configure the Cloudflare WordPress plugin. Make sure an SSL Certificate is installed on your host for your…

RSS From Toby’s Blog

  • Where uncertainty exists, don’t order specific.
    4 Idiot Case Studies with 2 simple age-old business lessons. The post Where uncertainty exists, don’t order specific. appeared first on Toby Cryns, WordPress Trainer in Minneapolis, MN.
  • “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. The post “Now THAT was a good meeting!” appeared first […]
  • 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 […]