[CSS] filter:drop-shadow()와 box-shadow의 차이점

둘 다 그림자 효과를 준다는 공통점이 있지만 요소에 적용되는 범위가 다르다.

 

box-shadow: 요소의 상자에 그림자를 추가하여 뒷면에 그림자 효과를 생성합니다.
filter: drop-shadow(): 요소 전체에 드롭 셰도우 효과를 적용하며, 이는 요소의 상자에만 국한되지 않고 내부의 투명하거나 반투명한 부분에까지 확장됩니다.

 

예시 이미지 (투명박스)

div {
  display: flex;
  width: 50px;
  height: 50px;
  border: 1px solid gray;
  margin: 1rem;
  align-items: center;
  justify-content: center;
}
.drop {filter: drop-shadow(0 0 5px rgba(0,0,0,.5));}
.box {box-shadow: 0 0 5px rgba(0,0,0,.5);}

 

예시 이미지의 위 박스는 drop 클래스로 filter:drop-shadow를 적용했고,

아래 박스는 box 클래스로 box-shadow를 적용했다.

위 박스는 텍스트, 박스요소까지 전체적으로 그림자가 들어간 반면에 아래 박스는 테두리에만 그림자가 들어갔다.

위와 같은 디자인은 일반적으로 보이지 않는다.
다만, 박스에 배경색상이 들어가면

예시 이미지 (불투명 박스)

 

거의 비슷한 효과를 보인다.

하지만 이와 같은 박스 그림자 구현을 위한 것이라면 호환성 측면에서 box-shadow를 사용하는 것이 일반적이다.

 

그럼 filter: drop-shadow()는 언제 유용하게 쓰일까?

 

한 SVG에 box-shadow를 넣어보자

svg 요소 (border-radius:50% 들어간 상태)

그 요소 박스 자체에 그림자가 들어간다.

 

하지만 아래처럼

박스가 아닌 요소의 누끼랄까? 개별적으로 그림자를 주고싶다면

filter: drop-shadow()를 이용하면 된다.

 

시안에 따라 목적에 맞는 방식을 사용하면 된다.

 

코드펜 예제

 

See the Pen Differences between filter:drop-shadow() and box-shadow by sel (@wimmwell) on CodePen.