Filters
Backdrop Blur Filter
Utilities for sets filter backdrop blur 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
class | css |
---|---|
backdrop-filter {blur} | backdrop-filter: brightness(var(--brightness)) contrast(var(--contrast)) saturate(var(--saturate)) blur(var(--blur)) |
class | css |
---|---|
blur-0 | --backdrop-blur: 0px |
blur-1 | --backdrop-blur: 2px |
blur-2 | --backdrop-blur: 4px |
blur-3 | --backdrop-blur: 6px |
blur-4 | --backdrop-blur: 8px |
blur-5 | --backdrop-blur: 10px |
blur-6 | --backdrop-blur: 12px |
blur-7 | --backdrop-blur: 14px |
blur-8 | --backdrop-blur: 16px |
blur-9 | --backdrop-blur: 18px |
blur-10 | --backdrop-blur: 20px |
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 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,
.blur-2,
.bg-tint-granite-1,
.bg-opacity-50,
.width-32,
.height-32;
}
SCSS
Mix with other filters, such as Backdrop Brightness, Backdrop Contrast, and Backdrop Saturate.
<div class="width-48 height-48" style="background-image:url(...)">
<div class="backdrop-filter blur-2 brightness-1 contrast-1 saturate-1 ... 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,
.blur-2,
.brightness-1,
.contrast-1,
.saturate-1,
.bg-tint-granite-1,
.bg-opacity-50,
.width-32,
.height-32;
}
SCSS