Backdrop Blur

Apply a backdrop-blur filter to an element.

Class names

Class	Description
backdrop-blur-xs	Extra small blur.
backdrop-blur-sm	Small blur.
backdrop-blur-md	Medium blur.

Examples

<div class="vbox gap-4">
  <div class="tile-sm bg-contain" style="background-image: url('/harmonia/logo/harmonia.svg')">
    <div class="vbox size-full items-center justify-center font-bold backdrop-blur-xs">Blur XS</div>
  </div>
  <div class="tile-sm bg-contain" style="background-image: url('/harmonia/logo/harmonia.svg')">
    <div class="vbox size-full items-center justify-center font-bold backdrop-blur-sm">Blur SM</div>
  </div>
  <div class="tile-sm bg-contain" style="background-image: url('/harmonia/logo/harmonia.svg')">
    <div class="vbox size-full items-center justify-center font-bold backdrop-blur-md">Blur MD</div>
  </div>
</div>