Filters

Blur Filter

Utility applies a Gaussian blur to the 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
filter `{blur}`	filter: brightness(var(--brightness)) contrast(var(--contrast)) saturate(var(--saturate)) blur(var(--blur)) drop-shadow(var(--drop-shadow)); transition: filter var(--extra-smooth) linear, transform var(--extra-smooth) linear;

class	css
blur-0	--blur: 0px
blur-1	--blur: 2px
blur-2	--blur: 4px
blur-3	--blur: 6px
blur-4	--blur: 8px
blur-5	--blur: 10px
blur-6	--blur: 12px
blur-7	--blur: 14px
blur-8	--blur: 16px
blur-9	--blur: 18px
blur-10	--blur: 20px

Usage

Filter: OFF

Filter: ON

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

<img class="filter blur-2 ..." src="...">
<div class="filter blur-2 ..." style="background-image:url(...)"> ... </div>

HTML

.dummy-first-image {
  @extend
    .filter,
    .blur-2;
}
.dummy-second-image {
  @extend
    .filter,
    .blur-2;
}

SCSS

Mix with other filters, such as Brightness, Contrast, Saturate and Drop Shadow.

<img class="filter blur-2 brightness-10 contrast-5 saturate-5 drop-shadow-md ..." src="...">
<div class="filter blur-2 brightness-10 contrast-5 saturate-5 ..." style="background-image:url(...)"> ... </div>

HTML

.dummy-first-image {
  @extend
    .filter,
    .blur-2,
    .brightness-10,
    .contrast-5,
    .saturate-5,
    .drop-shadow-md;
}
.dummy-second-image {
  @extend
    .filter,
    .blur-2,
    .brightness-10,
    .contrast-5,
    .saturate-5;
}

SCSS