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

classcss
backdrop-filter {blur}backdrop-filter: brightness(var(--brightness)) contrast(var(--contrast)) saturate(var(--saturate)) blur(var(--blur))
classcss
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