filter: invert()

Utilities for applying invert filters to an element.

Quick reference

Class	Styles
invert	filter: invert(100%);
invert-<number>	filter: invert(<number>%);
invert-(<custom-property>)	filter: invert(var(<custom-property>));
invert-[<value>]	filter: invert(<value>);

Examples

Basic example

<img class="invert" src="/img/mountains.jpg" />
<img class="invert-0" src="/img/mountains.jpg" />

Using a custom value

<img class="invert-[.8] ..." src="/img/mountains.jpg" />

For CSS variables:

<img class="invert-(--my-invert) ..." src="/img/mountains.jpg" />

Responsive design

<img class="invert md:invert-0 ..." src="/img/mountains.jpg" />