Press/to search

Filters

Backdrop Blur v1.1.0

Utilities for sets filter backdrop blur effect to an element.


Class

classcss
backdrop-filter {blur}backdrop-filter: brightness(var(--brightness)) contrast(var(--contrast)) saturate(var(--saturate)) blur(var(--blur))
Note: Your browser does not currently support the utilities.
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: 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 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 blur-2 ... bg-gray-100 bg-opacity-50">
...
</y>
</y>
</y>

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

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

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

Customization

Read more information about using the Plugin API, and Responsive or Pseudo-Class Variants configuration with the Plugin API.

// Add Values
@include yogurt(
$class: 'backdrop.blur',
$property: --backdrop-blur,
$modifier: (
1: 1px,
2: 2px
//...
)
);

Variant

ResponsiveDark ModeLight ModeReduce-MotionPortraitLandscapeHoverGroup-HoverFocusGroup-FocusFocus-VisibleFocus-WithinActiveVisitedCheckedDisabled

Default enabled variants. Read more information about the Responsive and Pseudo-Class Variants.