AAtomic CSS

backdrop-filter

요소 뒤의 영역에 필터 효과를 적용하는 속성입니다. 요소 자체가 아닌 배경에 블러, 밝기, 대비 등을 걸어 글래스모피즘(Glassmorphism) 같은 효과를 만들 수 있습니다. 반드시 요소에 반투명 배경을 함께 사용해야 효과가 보입니다.

클래스 목록

클래스CSS설명
bfb{N}pxbackdrop-filter: blur({N}px)배경에 블러 효과. 글래스모피즘의 핵심
bfbr{N}pbackdrop-filter: brightness({N}%)배경 밝기 조절. 100% 기본, 150% 밝게
bfc{N}pbackdrop-filter: contrast({N}%)배경 대비 조절. 100% 기본, 200% 강하게
bfg{N}pbackdrop-filter: grayscale({N}%)배경을 흑백으로. 100%이면 완전 흑백
bfhr{N}degbackdrop-filter: hue-rotate({N}deg)배경 색상 회전. 90deg, 180deg 등
bfi{N}pbackdrop-filter: invert({N}%)배경 색상 반전. 100%이면 완전 반전
bfo{N}pbackdrop-filter: opacity({N}%)배경 투명도. 50%이면 배경이 반투명
bfsa{N}pbackdrop-filter: saturate({N}%)배경 채도 조절. 200%이면 색상 강조

글래스모피즘 효과

반투명 배경 + bfb(blur)를 조합하면 유리처럼 뒤가 비치는 효과를 만들 수 있습니다.

Glass Card

bg255-255-255-10 + bfb10px + br12px

<!-- 글래스모피즘 카드 -->
<div class="pr">
  <!-- 배경 장식 -->
  <div class="pa t2rem l2rem w10rem h10rem bg6366F1 br100p"></div>
  <div class="pa b2rem r2rem w12rem h12rem bgEF4444 br100p"></div>

  <!-- 글래스 카드 -->
  <div class="bg255-255-255-10 bfb10px br12px p2-4rem b1pxsolid255-255-255-20">
    <h3>Glass Card</h3>
    <p>배경이 블러 처리되어 비칩니다</p>
  </div>
</div>

blur 강도 비교

동일한 배경 위에 서로 다른 bfb 값을 적용한 결과입니다.

bfb5pxblur 5px
bfb10pxblur 10px
bfb20pxblur 20px

기타 backdrop-filter

blur 외에도 brightness, contrast, grayscale, hue-rotate, invert, saturate 등을 배경에 적용할 수 있습니다.

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

코드 예시

<!-- 네비게이션 바 (스크롤 시 배경 블러) -->
<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>

<!-- 모달 오버레이 -->
<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>

<!-- 카드 위 배지 -->
<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>

팁 & 주의사항

반투명 배경 필수

backdrop-filter는 요소 뒤를 필터링하므로, 요소 자체가 불투명하면 효과가 보이지 않습니다. 반드시 bg255-255-255-10 같은 반투명 배경을 함께 사용하세요.

filter와의 차이

filter는 요소 자체에 효과를 적용하고, backdrop-filter는 요소 뒤의 배경에 효과를 적용합니다.

글래스모피즘 조합 공식

반투명 배경 + blur + border-radius + 반투명 보더 = 글래스 카드. 예: bg255-255-255-10 bfb10px br12px b1pxsolid255-255-255-20

filteropacitycolor (RGBA)border-radiusbackground