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.
More posts from themightymo.com
How to Connect a GoDaddy Site to ManageWP
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
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 Product Image Gallery Not Loading with WP Rocket Active
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…