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