Filters

Saturate Filter

Utility for sets saturates or desaturates to an element.

Variant

Active Checked Child-Selection Dark Mode Disabled Expand First-Last-Selection First-Letter Focus Focus-Visible Focus-Within Fullscreen Group-Focus Group-Hover Hover Landscape Light Mode Portrait Reduce-Motion Responsive Selection-hover Visited

API

class	css
filter `{saturate}`	filter: brightness(var(--brightness)) contrast(var(--contrast)) saturate(var(--saturate)) blur(var(--blur)) drop-shadow(var(--drop-shadow)); transition: filter var(--extra-smooth) linear, transform var(--extra-smooth) linear;

class	css
saturate-0	--saturate: 0
saturate-1	--saturate: 1
saturate-2	--saturate: 1.10
saturate-3	--saturate: 1.20
saturate-4	--saturate: 1.30
saturate-5	--saturate: 1.40
saturate-6	--saturate: 1.50
saturate-7	--saturate: 1.60
saturate-8	--saturate: 1.70
saturate-9	--saturate: 1.80
saturate-10	--saturate: 1.90

Usage

Filter: OFF

Filter: ON

Apply the filter class first, and then set the filter in any order when with other filters.

<img class="filter saturate-10 ..." src="...">

<div class="filter saturate-10 ..." style="background-image:url(...)"> ... </div>

HTML

.dummy {
  @extend
    .filter,
    .saturate-10;
}

SCSS

Mix with other filters, such as Brightness, Contrast, Blur and Drop Shadow.

<img class="filter saturate-10 brightness-10 contrast-5 blur-5 drop-shadow-md ..." src="...">

<div class="filter saturate-10 brightness-10 contrast-5 blur-5 ..." style="background-image:url(...)"> ... </div>

HTML

.dummy {
  @extend
    .filter,
    .saturate-10,
    .brightness-10,
    .contrast-5,
    .blur-5,
    .drop-shadow-md;
}

SCSS