Inverting Colors with CSS

Inverting colors in CSS is achieved using the filter property, specifically, the invert() function.

Syntax

The invert() function takes a value between 0 and 1, representing the degree of inversion. A value of 1 results in a complete color inversion, while 0 leaves the element colors unchanged.

selector {
  filter: invert(1);
}

You can also use a percentage-based number too:

selector {
  /* Behaves the same as .5 */
  filter: invert(50%);
}

Example

So you can see CSS invert in action; here's a little CodePen you can alter and see how it works.


The filter property opens up a world of dynamic aesthetic possibilities by allowing developers to manipulate the color scheme of specific elements on a webpage.

The invert() function is a handy and creative tool to implement interactive elements or adjust visual contrast on the fly.


Follow me on Twitter or connect on LinkedIn.

🚨 Want to make friends and learn from peers? You can join our free web developer community here. 🎉

CSS
Avatar for Niall Maher

Written by Niall Maher

Founder of Codú - The web developer community! I've worked in nearly every corner of technology businesses: Lead Developer, Software Architect, Product Manager, CTO, and now happily a Founder.

Loading

Fetching comments

Hey! 👋

Got something to say?

or to leave a comment.