값의 의미
box-shadow: x y blur spread color 순서입니다. x·y는 그림자가 요소에서 얼마나 밀려나는지(양수면 오른쪽·아래), blur는 가장자리를 얼마나 흐리게 할지, spread는 그림자를 요소보다 얼마나 크게(음수면 작게) 만들지를 정합니다. 색은 보통 검정에 투명도를 준 rgba(0,0,0,0.15) 형태로 쓰며, 이 도구도 선택한 색을 rgba로 바꿔 출력합니다. inset을 붙이면 그림자가 요소 안쪽으로 들어가 눌린 느낌이 됩니다.
왜 두 겹으로 쓰는가
실제 물체의 그림자는 광원 크기와 거리 때문에 한 가지 흐림값으로 표현되지 않습니다. 물체 바로 아래는 진하고 선명하며, 멀어질수록 옅고 넓게 퍼집니다. 그래서 디자인 시스템(Material, Tailwind 등)의 그림자는 대부분 2–3겹입니다. 이 도구의 두 번째 그림자를 켜서 "작은 흐림 + 약간 진한 색"으로 접촉면을, 첫 번째를 "큰 흐림 + 옅은 색"으로 퍼지는 부분을 맡기면 됩니다. 쉼표로 이어진 그림자는 먼저 적은 것이 위에 그려집니다.
어두운 배경과 색 있는 그림자
어두운 테마에서는 검정 그림자가 거의 보이지 않습니다. 이때는 투명도를 올리거나(30–50%), 요소를 배경보다 밝게 하여 단차를 만드는 편이 낫습니다. 브랜드 색을 띤 버튼에는 같은 색 계열의 그림자를 옅게 주면 떠 있는 느낌이 살아나는데, 색을 그 버튼 색으로 고르고 투명도를 20–30%로 두면 됩니다.
성능 참고
흐림 반경이 큰 그림자를 많은 요소에, 특히 스크롤·애니메이션 중에 적용하면 렌더링 비용이 커집니다. 목록 아이템 수백 개에 각각 큰 그림자를 주기보다 컨테이너에 한 번 주거나, hover 시에만 그림자를 바꾸는 편이 부드럽습니다. transition: box-shadow보다 그림자를 미리 그린 가상 요소의 opacity를 바꾸는 방식이 더 가볍습니다.
자주 묻는 질문
드롭 섀도(drop-shadow 필터)와 무엇이 다른가요?
box-shadow는 요소의 사각 박스를 기준으로 그림자를 만들고, filter: drop-shadow()는 투명 배경 이미지의 실제 모양을 따라 그림자를 만듭니다. PNG 아이콘에는 drop-shadow가 맞고, 카드·버튼에는 box-shadow가 적합합니다. spread와 inset은 box-shadow에만 있습니다.
그림자가 위에 있는 요소에 가려져요.
그림자는 요소 자체의 z-index를 따릅니다. 이웃 요소가 나중에 그려지면 그림자를 덮습니다. position: relative와 z-index를 주거나 요소 순서를 조정해야 합니다.