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 */
}