Filters

Backdrop Blur v1.1.0

Utilities for sets filter backdrop blur effect to an element.

Class

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>

Customize More

// @file: `src/_plugins.scss`
@include plugin(
  (
    utility: 'backdrop.blur',
    //variant: 'responsive',
    property: 'filter',
    modifier: (
      'blur-11': '...px',
      'blur-12': '...px'
      ...
    )
  )
)

Variant