Filters

Saturate v1.0.9

Utilities for sets saturate filter to an element.


Class

classcss
filter {saturate}filter: brightness(var(--brightness)) contrast(var(--contrast)) saturate(var(--saturate)) blur(var(--blur)) drop-shadow(var(--drop-shadow))
classcss
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
Note: Only supported web browsers can benefit from this utility.

Usage

Filter: OFFFilter: ON

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

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


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

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

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


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

Customize More

// @file: `src/_plugins.scss`
@include plugin(
(
utility: 'filter.saturate',
//variant: 'responsive',
property: '--saturate',
modifier: (
'saturate-11': '...',
'saturate-12': '...'
//...
)
)
)

Variant

VariantEnabledResponsive
DefaultYes
Dark Theme
hover
group-hover
focus
focus-within
active
visited
checked
disabled