자연스러운 그림자 만들기 — box-shadow 값 5개의 의미
카드, 버튼, 모달 — 요소를 띄워 보이게 하는 가장 쉬운 방법이 그림자입니다. 그런데 직접 넣어 보면 어딘가 어색합니다. 너무 진하거나, 사방으로 번지거나, 붕 떠 보이거나. box-shadow의 값 다섯 개가 각각 무엇을 하는지 알면 원인이 보입니다.
값 5개 해부하기
box-shadow: 0px 4px 12px 0px rgba(0,0,0,.15);
/* ↑x ↑y ↑blur ↑spread ↑색 */- x 오프셋 — 그림자를 좌우로 미는 거리. 보통 0으로 둡니다.
- y 오프셋 — 그림자를 아래로(양수) 내리는 거리. 빛이 위에서 온다는 가정이라 양수가 자연스럽습니다.
- blur(흐림) — 가장자리가 번지는 정도. 클수록 부드럽고 멀리 떠 보입니다.
- spread(확산) — 그림자 자체의 크기. 0이 기본, 음수면 그림자가 요소 뒤로 숨어 깔끔해집니다.
- 색 — 반투명 검정
rgba(0,0,0,.1~.25)가 표준입니다.inset키워드를 붙이면 안쪽 그림자가 됩니다.
자연스러운 그림자의 3가지 규칙
- 반투명하게 — 현실의 그림자는 바닥이 비쳐 보입니다. 불투명한 회색 대신 투명도 10~25%의 검정을 쓰세요.
- 아래로 — 빛은 위에서 옵니다. y 오프셋을 blur의 절반 정도로 주면(예: blur 12px에 y 6px) 자연스럽습니다.
- 높이에 맞게 — 살짝 뜬 요소(버튼)는 작은 y·작은 blur, 많이 뜬 요소(모달)는 큰 y·큰 blur. 떠 있는 높이와 그림자 크기가 비례해야 어색하지 않습니다.
한 단계 위: 쉼표로 그림자를 겹칠 수 있습니다. 또렷한 근거리 그림자 + 부드러운 원거리 그림자 2겹이 실무 표준입니다 —
box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 8px 24px rgba(0,0,0,.12);바로 쓰는 그림자 레시피
- 카드(기본):
0 2px 8px rgba(0,0,0,.12) - 호버 시 떠오르는 카드:
0 8px 24px rgba(0,0,0,.16) - 모달·팝업:
0 16px 48px rgba(0,0,0,.24) - 눌린 입력창(inset):
inset 0 1px 3px rgba(0,0,0,.1)
생성기로 만들기 3단계
- 미리보기를 보며 y 오프셋과 blur를 슬라이더로 조절합니다.
- 색 투명도를 10~25% 범위에서 맞춥니다 — 배경이 비쳐 보여야 합니다.
- 완성된 box-shadow 코드를 복사해 CSS에 붙여 넣습니다.
box-shadow 생성기슬라이더로 조절하고 코드 즉시 복사
만들기 →
자주 묻는 질문
Q. 그림자가 어색해 보이는 가장 흔한 원인은 뭔가요?
불투명한 진한 색을 쓰는 것입니다. 현실의 그림자는 빛이 줄어든 것이라 바닥이 비쳐 보입니다. 검정 100%가 아니라 투명도 10~25%의 반투명 검정(rgba)을 쓰면 대부분 해결됩니다. 두 번째 원인은 y 오프셋 없이 사방으로 퍼진 그림자인데, 빛은 보통 위에서 오므로 그림자를 아래로 살짝 내리는 것이 자연스럽습니다.
Q. blur와 spread는 어떻게 다른가요?
blur(흐림 반경)는 그림자 가장자리를 얼마나 부드럽게 번지게 할지, spread(확산)는 그림자 자체의 크기를 키우거나(양수) 줄일지(음수)를 정합니다. 보통 blur를 주로 쓰고 spread는 0이나 음수로 둡니다. spread를 음수로 주면 그림자가 요소 뒤로 살짝 숨어 더 깔끔해 보이는 효과가 있습니다.
Q. 그림자를 여러 겹 쓰는 이유는 뭔가요?
현실의 그림자는 또렷한 부분과 퍼진 부분이 함께 있기 때문입니다. box-shadow는 쉼표로 여러 그림자를 겹칠 수 있어, 가까운 또렷한 그림자(작은 y·작은 blur)와 멀리 퍼지는 그림자(큰 y·큰 blur)를 함께 쓰면 입체감이 훨씬 자연스러워집니다. 구글·애플 등 주요 디자인 시스템의 그림자도 대부분 2겹 이상입니다.
함께 보면 좋은 가이드