Filters

Saturate v1.0.9

Utility for sets saturates or desaturates to an element.

Class

class	css
filter `{saturate}`	filter: brightness(var(--brightness)) contrast(var(--contrast)) saturate(var(--saturate)) blur(var(--blur)) drop-shadow(var(--drop-shadow))

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.

<!-- 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>

Customization

Read more information about using the Plugin API, and Responsive or Pseudo-Class Variants configuration with the Plugin API.

// Add Values
@include yogurt(
  $class: 'filter.saturate',
  $property: --saturate,
  $modifier: (
    1: 1.10,
    2: 2.20
    //...
  )
);

Variant

ResponsiveDark ModeLight ModeReduce-MotionPortraitLandscapeHoverGroup-HoverFocusGroup-FocusFocus-VisibleFocus-WithinActiveVisitedCheckedDisabled

Default enabled variants. Read more information about the Responsive and Pseudo-Class Variants.