Skip to content

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="/public/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="/public/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="/public/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>