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>