filter: saturate()

Utilities for applying saturate filters to an element.

Quick reference

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

Examples

Basic example

<img class="saturate-150" src="/img/mountains.jpg" />
<img class="saturate-200" src="/img/mountains.jpg" />

Using a custom value

<img class="saturate-[1.75] ..." src="/img/mountains.jpg" />

For CSS variables:

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

Responsive design

<img class="saturate-150 md:saturate-200 ..." src="/img/mountains.jpg" />