Today one of my clients requested me to apply rainbow-color effects to her site’s title. This was a rather first-of-its-own-kind request, and this is when I use a CSS snippet to achieve the end result, that is, having the site title turn rainbow.

The code is simple. First, let’s apply a css class to the heading tag. In this example, I will use a class called ‘rainbow’ and add the code to it. The code will be as follows:

.rainbow {
background-image: linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red); 
-webkit-background-clip: text; 
-webkit-text-fill-color: transparent; }

You can add this snippet to your website’s style.css file or to your WordPress website using the Additional CSS section in the Customizer. Here’s an example of a rainbow-colored h2 tag – a quote by Morgan Freeman:

“I hate the word homophobia. It’s not a phobia. You’re not scared. You’re an arsehole.”

That’s it for today!

Signing off,

The Designer Genie