filter: contrast()

Utilities for applying contrast filters to an element.

Quick reference

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

Examples

Basic example

<img class="contrast-125" src="/img/mountains.jpg" />
<img class="contrast-200" src="/img/mountains.jpg" />

Using a custom value

<img class="contrast-[1.2] ..." src="/img/mountains.jpg" />

For CSS variables:

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

Responsive design

<img class="contrast-125 md:contrast-200 ..." src="/img/mountains.jpg" />