Beyond the Usual, Passive DEI Efforts in Tech

Blog:CSS's Filter: Invert()

Loading...
Manny Becerra as a child

December 2019

What we're accomplishing: easily invert the color of a PNG graphic to the opposite color using CSS's invert function.

The situation

Sometimes you only have one version of a graphic to work with, perhaps a company logo, but you really wish you had another version that was the opposite color of the one you're working with. Why? Well, as one example, maybe your website offers a theme switcher and you want the company logo to be contrasted with a darker or lighter theme palette for better contrast to your users.

The problem: you don't have access to a graphics editing tool, e.g. Illustrator or Photoshop. Or, you may not have access to a graphic's source file to make proper edits. Or, you just need a timely solution on the spot.

CSS's invert function to the rescue

The following CSS code will invert a PNG graphic's base color to the opposite color; in our case, our imaginary dark PNG logo with a class of logo will be flipped to white:

.logo {
  filter: invert(1);
}

The 1 we passed into the invert function in our sample code represents the amount to invert from a range between 0 and 1. As of the writing of this post, this site had a theme switcher implemented. and our sample PNG file should invert accordingly using the approach outlined above.

Related:


Loading...
Manny Becerra as a child

I operate from a place of compassion, possibility and imagination. My work and efforts share a common goal: create a better, sustainable and equitable world by building inclusive communities, products & experiences.