Filters

Backdrop Saturate Filter

Utilities for sets filter backdrop saturate effect 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

classcss
backdrop-filter {saturate}backdrop-filter: brightness(var(--brightness)) contrast(var(--contrast)) saturate(var(--saturate)) blur(var(--blur))
classcss
saturate-0--backdrop-saturate: 0
saturate-1--backdrop-saturate: 1
saturate-2--backdrop-saturate: 1.10
saturate-3--backdrop-saturate: 1.20
saturate-4--backdrop-saturate: 1.30
saturate-5--backdrop-saturate: 1.40
saturate-6--backdrop-saturate: 1.50
saturate-7--backdrop-saturate: 1.60
saturate-8--backdrop-saturate: 1.70
saturate-9--backdrop-saturate: 1.80
saturate-10--backdrop-saturate: 1.90

Usage

Filter: OFF
Filter: ON

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

<div class="width-48 height-48" style="background-image:url(...)">
<div class="backdrop-filter saturate-10 ... bg-tint-granite-1 bg-opacity-50 ... width-32 height-32">
...
</div>
</div>
HTML
.dummy-image {
@extend
.width-48,
.height-48;
}
.dummy-backdrop-blur {
@extend
.backdrop-filter,
.saturate-10,
.bg-tint-granite-5,
.bg-opacity-50,
.width-32,
.height-32;
}
SCSS

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

<div class="width-48 height-48" style="background-image:url(...)">
<div class="backdrop-filter saturate-10 contrast-1 brightness-1 blur-2 ... bg-tint-granite-1 bg-opacity-50 ... width-32 height-32">
...
</div>
</div>
HTML
.dummy-image {
@extend
.width-48,
.height-48;
}
.dummy-backdrop-blur {
@extend
.backdrop-filter,
.saturate-10,
.contrast-1,
.brightness-1,
.blur-2,
.bg-tint-granite-5,
.bg-opacity-50,
.width-32,
.height-32;
}
SCSS