CSS is powerful in many ways. It is a language that can do a lot in terms of setting the visual representation of the applications we build and transversing them at any moment. A great example of this is the property invert().

Invert is a CSS property that allows for inverting(making the opposite) the look of an element. Some people have used this as a quick trick to create a dark mode for their application, and others to make a quick night vision effect. Either way, it’s powerful and useful. With that being said, let’s look at some code!

.BaseElement {
  width: 200px;
  height: 200px;
  background-color: #FFFFFF;
}

.BaseElement--invert {
  filter: invert(1) 
  /* Can take numbers(0.x to 1) or percentages */
}