filter: grayscale()

Utilities for applying grayscale filters to an element.

Quick reference

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

Examples

Basic example

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

Using a custom value

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

For CSS variables:

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

Responsive design

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