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