[css] backdrop-filter

🧩 backdrop-filter란?

backdrop-filter는 요소 뒤의 배경에 그래픽 효과(블러, 채도 조정 등)를 적용하는 css 속성이다.
즉, 요소 자체가 아니라 "그 뒤에 보이는 배경"을 흐리게 하거나 조정하는 것이다.
예를 들어, 반투명 유리창 같은 효과를 낼 때 필수이다.

---

🧱 기본 문법

backdrop-filter: <filter-function> [<filter-function>]*;

여러 필터를 띄어쓰기 한 번으로 이어서 쓸 수 있다.

필터 함수	설명	예시
blur()	배경을 흐리게	blur(10px)
brightness()	밝기 조절	brightness(0.8)
contrast()	대비 조절	contrast(120%)
grayscale()	흑백 효과	grayscale(0.5)
saturate()	채도 조절	saturate(150%)
sepia()	갈색톤 효과	sepia(0.3)

---

🧊 예시 - 유리 효과 카드 (Glassmorphism)

    .glass {
      width: 300px;
      height: 200px;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 16px;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.3);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    }

요소 뒤의 배경이 흐릿하게 보이면서, 마치 분투명한 유리창 같은 느낌을 낸다.

---

💡 중요한 점 - 투명도(background: rgba 또는 opacity)

backgdrop-filter는 요소 뒤의 배경에 적용되므로 해당 요소가 완전히 불투명하면 아무 효과도 보이지 않는다.

즉, 아래 두 조건 중 하나가 필요하다.

• background에 투명도(alpha) 값이 포함되어야 함.
• 또는 요소가 반투명(opacity < 1)해야 함.

---

🌈 여러 필터 조합도 가능

.glass-card {
  backdrop-filter: blur(10px) saturate(180%);
}

blur로 흐리게 만들고, saturate로 배경 색을 선명하게 하면
투명 유리 위에 비치는 색감이 더 예쁘게 살아난다.

---

⚠️ 브라우저 지원

브라우저	지원 여부
Chrome	✅
Edge	✅
Safari	✅ (단, -webkit-backdrop-filter 필요)
Firefox	⚠️ 실험적, layout.css.backdrop-filter.enabled 설정 필요
IE	❌ 지원 안 함

Safari 호환을 위해 아래 속성을 함께 써주는 것이 좋다.

-webkit-backdrop-filter: blur(10px);

---

🎯 실무 팁

• Glassmorphism UI에서는 blur(10px), rgba(255,255,255,0.2~0.3) 조합이 가장 자연스럽다.
• hover 시 blur나 brightness 값을 살짝 변경하면 입체감이 생긴다.
• 단색 배경보다는 이미지나 그라디언트 배경에서 효과가 더 잘 드러난다.
• 성능 주의: backdrop-filter는 GPU 가속을 쓰기 때문에 너무 많이 사용하면 렌더링 부담이 커질 수 있다.

---

📘 정리

효과	예시
유리창 느낌	blur(10px)
선명한 색감 강조	saturate(180%)
어두운 유리 느낌	blur(12px) brightness(0.7)
흑백 필터	grayscale(1)