Backdrop Blur

Applies background blur filters to an element.

Class	Property
bf-b-none	backdrop-filter: blur(0px);
bf-b-xs	backdrop-filter: blur(4px);
bf-b-sm	backdrop-filter: blur(8px);
bf-b-md	backdrop-filter: blur(16px);
bf-b-lg	backdrop-filter: blur(32px);
bf-b-xl	backdrop-filter: blur(64px);

sm

md

lg

<div class="d-g g-16 gtc-3">
  <div class="dim-32 p-r rad-2">
    <img class="dim-full of-c rad-2" src="https://picsum.photos/id/870/300/300" alt="Mountain">
    <div class="ai-c bf-b-sm d-f dim-14 dir-i-0 fw-700 jc-c m-auto p-a tc-white">sm</div>
  </div>
  <div class="dim-32 p-r rad-2">
    <img class="dim-full of-c rad-2" src="https://picsum.photos/id/870/300/300" alt="Mountain">
    <div class="ai-c bf-b-md d-f dim-14 dir-i-0 fw-700 jc-c m-auto p-a tc-white">md</div>
  </div>
  <div class="dim-32 p-r rad-2">
    <img class="dim-full of-c rad-2" src="https://picsum.photos/id/870/300/300" alt="Mountain">
    <div class="ai-c bf-b-lg d-f dim-14 dir-i-0 fw-700 jc-c m-auto p-a tc-white">lg</div>
  </div>
</div>

---

Using responsive modifiers

Using responsive breakpoints like sm:bf-b-*, md:bf-b-*, lg:bf-b-*, and xxl:bf-b-* allows targeting specific utilities in different viewports.

<div class="bf-b-none md:bf-b-sm ..."></div>

Using hover modifiers

Using :hover modifiers such as h:bf-b-* allows you to override elements and change their values when hovering over them.

<div class="bf-b-none h:bf-b-sm ..."></div>