Skip to content
Sunsetting Yumma CSS Intellisense extension 👋

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

This example showcases various backdrop blur values: 8px, 16px, and 32px.

  • The bf-b-sm utility sets the backdrop-filter property to blur(8px), applying a slight blur effect.
  • The bf-b-md utility sets the backdrop-filter property to blur(16px), creating a moderate blur effect.
  • Finally, bf-b-lg utility sets the backdrop-filter property to blur(32px), resulting in a strong blur effect.
sm
md
lg
<div class="d-g g-16 gtc-1 sm:gtc-3">
<div class="dim-32 p-r rad-1">
<img class="dim-full of-c rad-1" src="https://picsum.photos/300?image=872" />
<div class="ai-c bf-b-sm d-f dim-22 dir-i-0 jc-c m-auto p-a rad-1 tc-white">sm</div>
</div>
<div class="dim-32 p-r rad-1">
<img class="dim-full of-c rad-1" src="https://picsum.photos/300?image=872" />
<div class="ai-c bf-b-md d-f dim-22 dir-i-0 jc-c m-auto p-a rad-1 tc-white">md</div>
</div>
<div class="dim-32 p-r rad-1">
<img class="dim-full of-c rad-1" src="https://picsum.photos/300?image=872" />
<div class="ai-c bf-b-lg d-f dim-22 dir-i-0 jc-c m-auto p-a rad-1 tc-white">lg</div>
</div>
</div>

Conditional styles

Learn how to override existing utilities based on the user's screen size or other factors, such as hover states.

Media modifiers

You can combine 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>
Hover modifiers

Alternatively, you can apply :hover by using h:bf-b-* utility to override elements and change their values when hovering over them.

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