AAtomic CSS

backdrop-filter

Applies filter effects to the area behind an element. Blur, brightness, contrast on the background creates Glassmorphism effects. Requires semi-transparent background.

Class List

ClassCSSDescription
bfb{N}pxbackdrop-filter: blur({N}px)Background blur. Core of glassmorphism
bfbr{N}pbackdrop-filter: brightness({N}%)Background brightness. 100% default, 150% brighter
bfc{N}pbackdrop-filter: contrast({N}%)Background contrast. 100% default, 200% stronger
bfg{N}pbackdrop-filter: grayscale({N}%)Background grayscale. 100% full grayscale
bfhr{N}degbackdrop-filter: hue-rotate({N}deg)Background hue rotation. 90deg, 180deg, etc.
bfi{N}pbackdrop-filter: invert({N}%)Background color inversion. 100% full inversion
bfo{N}pbackdrop-filter: opacity({N}%)Background opacity. 50% semi-transparent
bfsa{N}pbackdrop-filter: saturate({N}%)Background saturation. 200% enhanced colors

Glassmorphism Effect

Combining semi-transparent background with bfb (blur) creates a glass-like see-through effect.

Glass Card

bg255-255-255-10 + bfb10px + br12px

<!-- Glassmorphism card -->
<div class="pr">
  <!-- Background decorations -->
  <div class="pa t2rem l2rem w10rem h10rem bg6366F1 br100p"></div>
  <div class="pa b2rem r2rem w12rem h12rem bgEF4444 br100p"></div>

  <!-- Glass card -->
  <div class="bg255-255-255-10 bfb10px br12px p2-4rem b1pxsolid255-255-255-20">
    <h3>Glass Card</h3>
    <p>Background is blurred and shows through</p>
  </div>
</div>

Blur Intensity Comparison

Different bfb values on the same background.

bfb5pxblur 5px
bfb10pxblur 10px
bfb20pxblur 20px

Other backdrop-filters

Besides blur, brightness, contrast, grayscale, hue-rotate, invert, saturate can be applied to the background.

bfbr150pbrightness 150%
bfc50pcontrast 50%
bfg100pgrayscale 100%
bfhr90deghue-rotate 90deg
bfi100pinvert 100%
bfsa200psaturate 200%

Code Examples

<!-- Navigation bar (background blur on scroll) -->
<nav class="pf t0 l0 w100p bg0-0-0-50 bfb10px py12px px2rem df jcsb aic zi100">
  <span class="cFFFFFF fw700">Logo</span>
  <div class="df gap2rem">
    <a class="cFFFFFF tdn">Menu</a>
  </div>
</nav>

<!-- Modal overlay -->
<div class="pf t0 l0 w100p h100p bg0-0-0-30 bfb5px df jcc aic zi999">
  <div class="bg18181B p3-2rem br12px maxw50rem w100p">
    <h2>Modal Title</h2>
    <p>Content here</p>
  </div>
</div>

<!-- Badge on card -->
<div class="pr bg27272A p2rem br8px">
  <span class="pa t8px r8px bg255-255-255-20 bfb10px py4px px12px br4px cFFFFFF fs12px">
    NEW
  </span>
  <p class="cFAFAFA">Card content</p>
</div>

Tips & Notes

Semi-transparent background required

backdrop-filter filters behind the element. Opaque elements hide the effect. Always use semi-transparent background like bg255-255-255-10.

Difference from filter

filter applies to the element itself; backdrop-filter applies to the background behind it.

Glassmorphism formula

Semi-transparent bg + blur + border-radius + semi-transparent border = glass card. E.g.: bg255-255-255-10 bfb10px br12px b1pxsolid255-255-255-20

filteropacitycolor (RGBA)border-radiusbackground