Filters

Saturate v1.0.9

Utilities for sets saturate filter to an element.

Class

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