filter: contrast()

Utilities for applying contrast filters to an element.

Source: https://tailwindcss.com/guide/filter-contrast

Quick reference

• contrast-[<value>], contrast-(<custom-property>), preset utilities like contrast-125, contrast-200

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" />