디자인 아틀라스
EN
✦ 시각 효과

drop-shadow vs box-shadow

box-shadow 는 요소의 (둥근) 사각 박스 모양으로 그림자를 그리고, filter: drop-shadow() 는 실제 보이는 픽셀(알파 채널)의 윤곽을 그대로 따라갑니다.

다른 이름: filter: drop-shadow()Silhouette shadow
···
html
<div class="pair">
  <div class="item"><div class="frame bs"><svg class="star" viewBox="0 0 100 100"><polygon points="50,0 61,35 98,35 68,57 79,91 50,70 21,91 32,57 2,35 39,35" fill="#5b5bf7"/></svg></div><span class="cap">box-shadow</span></div>
  <div class="item"><div class="frame"><svg class="star ds" viewBox="0 0 100 100"><polygon points="50,0 61,35 98,35 68,57 79,91 50,70 21,91 32,57 2,35 39,35" fill="#18c29c"/></svg></div><span class="cap">filter: drop-shadow()</span></div>
</div>
css
.pair{display:flex;gap:14%;align-items:flex-start}
.item{display:flex;flex-direction:column;align-items:center;gap:10px}
.frame{width:26vmin;max-width:110px;aspect-ratio:1;display:grid;place-items:center}
.frame.bs{box-shadow:0 16px 26px rgba(0,0,0,.55)}
.star{width:100%;height:100%;animation:spin 9s linear infinite;transform-origin:50% 50%}
.star.ds{filter:drop-shadow(0 16px 16px rgba(0,0,0,.55))}
.cap{font:600 12px/1.3 monospace;color:var(--muted);text-align:center}
@keyframes spin{to{transform:rotate(360deg)}}

box-shadow 는 border-box 를 기준으로 그림자를 그립니다. 별·도넛처럼 투명한 부분이 있는 모양이어도 상관없이, 박스는 그냥 사각형(또는 border-radius 만큼 둥근 사각형)이라서 그림자도 사각형으로 나옵니다.

filter: drop-shadow() 는 반대로 요소의 알파 채널을 읽어서, 실제로 불투명한 픽셀의 윤곽 그대로 그림자를 만듭니다. 오목한 부분·구멍이 있어도 정확히 따라가고, 요소가 rotate·scale 되면 그림자도 그 변환을 그대로 반영합니다(필터이기 때문입니다).

데모의 별 두 개를 비교하세요 — box-shadow 쪽은 별의 오목한 틈 사이로 사각형 그림자의 흔적이 비치고, drop-shadow 쪽은 별 모양 그대로 그림자가 집니다. 대신 drop-shadow 는 알파 마스크에서 다시 계산해야 해서 box-shadow 보다 무겁고, inset 이나 spread 값이 없습니다 — 사각형 카드처럼 실루엣이 곧 박스인 경우에는 box-shadow 가 더 싸고 충분합니다.

언제 쓰나

아이콘·로고·투명 배경 이미지처럼 실루엣이 박스와 다른 요소는 drop-shadow, 카드·버튼처럼 실루엣이 곧 박스인 요소는 box-shadow 를 쓰세요.