Blog:CSS's Filter: Invert()
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:
- JavaScript Array Reduce
- CSS Transitions
- Asynchronous JavaScript: On Promises
- Discoverability, Semantic Markup & Accessibility
- More on CSS's invert function (MDN)
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.