Filters
Backdrop Blur v1.1.0
Utilities for sets filter backdrop blur effect to an element.
Class
| 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
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
Default enabled variants. Read more information about the Responsive and Pseudo-Class Variants.