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 am human, a father, and a problem solver: an inclusive tech and people leader with a passion and proven track-record in recruiting and leading compassionate, productive teams—remote and on-site—within a continuous learning culture. My teams and I champion usable, accessible digital products and online experiences. My work, passion and values also intersect with advising small businesses and political campaigns, outdoor and education advocacy, community building, and amplifying voices from historically marginalized communities. Learn more about Manny
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.