Mini Tuts: How to Write Rainbow-colored Text using CSS

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

Mini Tuts: How to Quickly Create White Logo using CSS

It happens seldom with me that I stumble upon a website project where I have to add a white logo to the header or footer. Now, it isn’t always that the representative can provide me with the same in an instance, and this is when I use a CSS snippet to achieve the end result, that is, having a logo turn white.

The code is simple. First, copy the CSS class of the image. In this example, I will use class called ‘whiteimage’ and add the code to it. The code will be as follows:

.whiteimage {
filter: brightness(0) invert(1);
}

You can add this snippet your website’s style.css file or to your WordPress website using the Additional CSS section in the Customizer. Here’s an example (try opening the logo in a new tab – it’s actually black!):

That’s it for today!

Signing off,

The Designer Genie

Privacy Settings
We use cookies to enhance your experience while using our website. If you are using our Services via a browser you can restrict, block or remove cookies through your web browser settings. We also use content and scripts from third parties that may use tracking technologies. You can selectively provide your consent below to allow such third party embeds. For complete information about the cookies we use, data we collect and how we process them, please check our Privacy Policy
Youtube
Consent to display content from Youtube
Vimeo
Consent to display content from Vimeo
Google Maps
Consent to display content from Google