Changing the Color of a PNG Image Using only 1-line CSS in WordPress

Ivan Oung


Use nothing but CSS to change the color of a PNG image.


Targeted Style
Current Style

The challenge would be easier if I can just use toosl like Photoshop to change the source image into white.

However, all pages have a top navigation bar with a white background, and WordPress only accept one logo at a time, so changing the color of the logo with a photo editing tools would not be a feasible idea.

Which left me with nothing else but CSS.


After a bit of searching, CSS Filter seems to be the best way to go.

Definition from MDN web docs
.header-image {
        filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(1%)
            hue-rotate(149deg) brightness(103%) contrast(101%);

I also used this color filter generator to come up with the code that I need, which in my case is just pure white.

After applying CSS Filter

Perfect result!

Navigation Menu


Stay In Touch!

I'll only send the good stuff, no spam, no bs, I promise!

More Readings

Everything you need to know about backup your WordPress site

In today’s digital age, where websites are vulnerable to hacking, server crashes, and accidental deletion, backing up your WordPress site is not an option – it’s a necessity. Losing your ... Read more

Best 16 CMS for Startups in Hong Kong

Still choosing a CMS? Here's a list of the best 16 CMS for your startup to grow in Hong Kong.

Maximizing Lead Conversion: Strategies to Increase Your Conversion Rate

Understanding lead conversion and implementing effective strategies to increase conversion rates are essential for any business looking to maximize its revenue and growth.

A WordPress Developer Who You Can Trust.

I always build my relationships with my clients based on trust. I want to see you grow as much as I myself. Let's work together to grow your business.

Get A Free Quote
Share to...