filter: sepia()

Utilities for applying sepia filters to an element.

Quick reference

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

Examples

Basic example

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

Using a custom value

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

For CSS variables:

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

Responsive design

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