Filters

Backdrop Saturate v1.1.0

Utilities for sets filter backdrop saturate effect to an element.

Class

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

Note: Your browser does not currently support the utilities.

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: OFFFilter: ON

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

<!-- Example -->
<y style="background-image:url(...)">
  <y class="backdrop-filter saturate-10 ... bg-gray-100 bg-opacity-50">
    ...
  </y>
</y>

<y class="relative ...">
  <img src="...">
  <y class="absolute top-0 left-0">
    <y class="backdrop-filter saturate-10 ... bg-gray-100 bg-opacity-50">
      ...
    </y>
  </y>
</y>

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

<!-- Example -->
<y style="background-image:url(...)">
  <y class="backdrop-filter saturate-10 brightness-1 saturate-1 blur-2 ... bg-gray-100 bg-opacity-50">
    ...
  </y>
</y>

<y class="relative ...">
  <img src="...">
  <y class="absolute top-0 left-0">
    <y class="backdrop-filter saturate-10 brightness-1 saturate-1 blur-2 ... bg-gray-100 bg-opacity-50">
      ...
    </y>
  </y>
</y>

Customize More

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

Variant

Variant	Enabled	Responsive
Default	Yes
Dark Theme
hover
group-hover
focus
focus-within
active
visited
checked
disabled