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