CSS `filter: drop-shadow` vs `box-shadow` 완벽 비교

웹 개발을 하다 보면 그림자를 넣을 때 box-shadow 와 filter: drop-shadow 두 가지 방법을 자주 접하게 됩니다. 하지만 이 둘은 비슷해 보이면서도 실제로는 다른 방식으로 동작합니다. 이번 글에서는 두 속성의 차이와 활용 방법을 정리해 보겠습니다.

---

1. 렌더링 방식의 차이

• box-shadow
  요소의 박스(box) 영역에 그림자가 적용됩니다. 즉, width, height, border, border-radius로 정의되는 직사각형 영역을 기준으로 그림자가 생깁니다. 요소 내부의 투명 픽셀은 무시됩니다.

• filter: drop-shadow
  요소가 렌더링된 실제 픽셀 단위를 기준으로 그림자가 적용됩니다. 즉, 투명 영역을 제외하고 눈에 보이는 부분에만 그림자가 따라붙습니다. PNG, SVG, 텍스트 등 불규칙한 형태에 유용합니다.

---

2. 적합한 사용 사례

• box-shadow
  버튼, 카드, 모달 같은 네모난 UI 컴포넌트에 적합합니다. 단순하고 성능도 우수합니다.

• drop-shadow
  PNG 이미지(투명 배경 포함), 아이콘, SVG 그래픽, 불규칙한 텍스트 효과 등 투명도를 고려한 그림자가 필요할 때 적합합니다.

---

3. 성능 차이

• box-shadow
  브라우저의 박스 모델 렌더링 과정에 포함되기 때문에 일반적으로 더 가볍습니다.

• drop-shadow
filter는 후처리(Post-processing) 효과로 동작합니다. 즉, 요소가 모두 그려진 뒤 그림자가 입혀지므로 더 많은 연산이 필요해 성능 비용이 클 수 있습니다.

---

4. 문법 비교

• box-shadow 예제

  box-shadow: 0px 0px 20px rgba(203, 23, 26, 0.7);

  → 요소의 사각형 영역 기준 그림자.

• drop-shadow 예제

  filter: drop-shadow(0px 0px 20px rgba(203, 23, 26, 0.7));

  → 요소의 투명도를 고려하여 실제 픽셀 기준 그림자.

---

5. 실제 비교 예제

img.box {
  box-shadow: 0px 0px 20px rgba(203, 23, 26, 0.7);
}

img.drop {
  filter: drop-shadow(0px 0px 20px rgba(203, 23, 26, 0.7));
}

• box-shadow → 투명 PNG라도 사각형 테두리 전체에 그림자가 생깁니다.
• drop-shadow → PNG 이미지 모양에 맞게 그림자가 따라갑니다.

---

마무리

정리하자면,

• UI 컴포넌트 → box-shadow
• 불규칙한 형태, 투명도 반영 → drop-shadow

이 원칙만 기억하면 언제 어떤 속성을 써야 할지 헷갈리지 않을 겁니다.