이게 뭔가요?
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%로 낮추고 은은한 그림자를 두 겹 겹치니 훨씬 자연스러웠다. 다크 모드로 넘어가선 밝은 배경용 그림자가 거의 안 보여서, 테마별로 그림자 세기를 따로 정의해 elevation 토큰으로 관리하게 됐다.