이게 뭔가요?

CSS box-shadow는 가로·세로 오프셋, 흐림(blur), 확산(spread), 색상, 안쪽/바깥쪽 여부로 그림자를 정의합니다. 값이 여러 개라 감으로 조정하기 번거로운데, 이 도구는 슬라이더로 각 값을 바꾸면 실시간 미리보기와 함께 완성된 CSS 코드를 보여주고 복사까지 해 줍니다.

언제 쓰나요?

카드·버튼·모달에 은은한 그림자를 넣어 입체감을 줄 때, 디자인 시스템의 그림자 토큰(elevation)을 정할 때, 또는 안쪽 그림자(inset)로 눌린 느낌이나 홈(groove)을 표현할 때 씁니다.

실무에서 자주 틀리는 점

너무 진한 그림자. 검정을 100% 불투명으로 쓰면 촌스럽고 무거워 보입니다. 실무에서는 낮은 불투명도(예: 10~25%)의 색을 여러 겹 쌓아 부드럽게 만드는 편이 자연스럽습니다.
blur과 spread 혼동. blur는 가장자리를 흐리게, spread는 그림자 크기 자체를 키우거나(양수) 줄입니다(음수). 음수 spread로 그림자를 요소 안쪽으로 당기면 더 세련돼 보입니다.
성능. 큰 blur 값이나 애니메이션되는 그림자는 리페인트 비용이 큽니다. 많은 요소에 적용하면 스크롤이 버벅일 수 있습니다.
다크 모드. 밝은 배경용 그림자는 어두운 배경에서 거의 안 보입니다. 테마별로 그림자 세기를 따로 정해야 합니다.

활용 팁 — 0 4px 8px rgba(0,0,0,1)처럼 검정 100%는 거의 쓰이지 않습니다. 불투명도를 15~25%로 낮추고 퍼짐이 다른 그림자를 두 겹 겹치면 훨씬 자연스럽습니다. 다크 모드에서는 어두운 배경 위의 검정 그림자가 잘 보이지 않으므로, 테마별로 그림자 세기를 따로 정의해 두는 디자인 시스템이 많습니다.