Backdrop Blur

Applies background blur filters to an element.

Class	Properties
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);

<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="/assets/images/mountain.png" alt="Mountain">
        <div class="bf-b-sm dim-20 dir-i-0 fw-700 ins 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="/assets/images/mountain.png" alt="Mountain">
        <div class="bf-b-md dim-20 dir-i-0 fw-700 ins 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="/assets/images/mountain.png" alt="Mountain">
        <div class="bf-b-lg dim-20 dir-i-0 fw-700 ins m-auto p-a tc-white">lg</div>
    </div>
</div>

---

Using breakpoints

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 variants

Using :hover variants 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>