[HTML/CSS] backdrop-filter vs filter 속성 비교

TL;DR

---

• backdrop-filter : 속성을 적용한 요소의 배경에만 효과가 적용됨. 콘텐츠는 영향 안받음
  • Tailwind : backdrop-blur-sm
  • CSS : backdrop-filter: blur(4px);
• filter : 속성을 적용한 요소 전체(자식요소 포함)에 효과가 적용됨. 주로 이미지 태그에 사용함
  • Tailwind : blur-sm
  • CSS : filter: blur(4px);
  • 💡 콘텐츠가 없거나 배경색이 지정되어 있지 않으면 효과 적용 안되므로 주의

 

Blur 배경 구현

---

두 속성 모두 적용되는 효과는 동일하나 filter 속성은 자식 요소를 포함한 요소 전체에 적용되므로 Blur 효과가 들어간 배경을 구현하려면 background 추가 요소를 별도로 만들어야 한다 — 참고글

<div class="wrapper">
  <div class="background"></div>
  <!-- filter 블러 효과를 위한 추가 요소 -->
  <div class="foreground"></div>
  <!-- 콘텐츠 -->
</div>

.background {
  filter: blur(4px);
  position: absolute;
  width: 100%;
  height: 100%;
}

 

backdrop-filter를 사용하면 추가 요소 없이 블러 효과가 들어간 배경을 만들 수 있다.

.foreground {
  backdrop-filter: blur(10px);
} /* No .wrapper needed! */

 

backdrop-filter 예시 — 클릭시 Codepen으로 이동

 

 

레퍼런스

---

backdrop-filter | CSS-Tricks

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요