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. 🎉