CSS box-shadow 레퍼런스: 고도별 그림자 레시피 표와 다중 그림자 실전

같은 카드라도 box-shadow: 0 1px 3px rgba(0,0,0,0.12) 한 줄을 더했을 뿐인데 화면에서 둥 떠오르는 느낌이 나는 경험이 있을 것이다. 반대로 그림자를 잘못 쓰면 UI가 탁하고 무거워 보인다. 이 글은 box-shadow의 네 가지 길이값이 시각적으로 무엇을 의미하는지, 그리고 실제로 쓸 수 있는 그림자 레시피 표를 깊게 정리한다.

box-shadow 문법 완전 분해

box-shadow: <offset-x> <offset-y> <blur-radius> <spread-radius> <color>;

• offset-x / offset-y: 그림자의 수평·수직 이동. 양수 y는 아래쪽으로 그림자가 진다.
• blur-radius: 흐림 정도. 클수록 부드럽고 넓게 퍼진다. 음수 불가.
• spread-radius: 그림자 크기 확장(양수)·축소(음수). 생략 가능.
• color: 보통 rgba()로 투명도를 줘서 자연스럽게 만든다.

inset 키워드를 맨 앞에 붙이면 안쪽으로 파인 그림자가 된다. 색·투명도 감각이 헷갈린다면 tools의 색상 코드 변환 도구 계열 가이드가 도움이 된다.

깊이(elevation)별 그림자 레시피 표

머티리얼 디자인이 제시한 "고도(elevation)" 개념을 응용하면, 요소가 표면에서 얼마나 떠 있는지를 그림자로 일관되게 표현할 수 있다. 아래는 자주 쓰는 단계별 값이다(수치는 일반적으로 통용되는 elevation 관례를 정리한 것으로, 절대 기준이 아니라 출발점으로 보면 된다).

값이 커질수록 "더 높이 떠 있다"는 인상을 준다. 핵심은 blur는 offset의 2~3배 정도로 두고, 색은 검정 100%가 아니라 투명도를 낮춘 회색 계열로 두는 것이다.

자연스러운 그림자를 만드는 3원칙

1. 다중 그림자로 층을 쌓는다

그림자 하나로 모든 깊이를 표현하려 하면 딱딱해진다. 가까운 약한 그림자 + 멀리 퍼지는 옅은 그림자를 콤마로 겹치면 실제 빛처럼 보인다.

box-shadow:
  0 1px 1px rgba(0,0,0,0.10),
  0 2px 2px rgba(0,0,0,0.10),
  0 4px 8px rgba(0,0,0,0.10);

2. 색을 검정 대신 배경 톤으로

순수 검정 그림자는 회색 배경 위에서 탁해 보인다. 배경이 푸른 톤이면 그림자도 살짝 푸른 어두운 색을 쓰면 더 자연스럽다.

3. inset으로 눌린 느낌을 준다

입력창이나 토글의 "눌림" 상태에는 inset을 쓴다. 예: box-shadow: inset 0 2px 4px rgba(0,0,0,0.12);

실전 예시: 버튼 호버 인터랙션

.btn {
  box-shadow: 0 2px 4px rgba(0,0,0,0.12);
  transition: box-shadow 0.2s, transform 0.2s;
}
.btn:hover {
  box-shadow: 0 6px 14px rgba(0,0,0,0.18);
  transform: translateY(-1px);
}

그림자를 키우면서 1px 위로 올리면 "버튼이 손가락을 따라 떠오르는" 미세한 피드백이 생긴다.

성능 주의점

box-shadow는 블러 반경이 크고 요소가 많을수록 페인팅 비용이 커진다. 스크롤·애니메이션 중 끊김이 보이면 (1) 애니메이션 대상은 box-shadow 대신 opacity를 가진 가짜 그림자 레이어로 분리하거나 (2) will-change를 신중히 적용한다. 큰 blur를 가진 그림자를 수백 개 동시에 그리는 리스트는 특히 주의해야 한다.

자주 묻는 질문

box-shadow와 drop-shadow의 차이는?

box-shadow는 요소의 사각 박스 경계를 따라 그림자를 만들고, filter: drop-shadow()는 실제 픽셀의 알파 모양(투명 PNG의 윤곽 등)을 따라 그림자를 만듭니다. 투명한 로고 이미지에 그림자를 주려면 drop-shadow가 맞습니다.

그림자가 잘려 보여요.

부모 요소에 overflow: hidden이 걸려 있으면 자식의 그림자가 잘립니다. 그림자가 박스 밖으로 나가야 한다면 부모의 overflow 설정을 확인하세요.

다크 모드에서 그림자가 안 보입니다.

어두운 배경에서는 검은 그림자가 묻힙니다. 다크 모드에서는 그림자를 더 진하게 하기보다, 테두리(보더)나 살짝 밝은 표면색으로 고도를 표현하는 편이 효과적입니다.

spread-radius는 언제 쓰나요?

그림자를 요소보다 작게(음수) 만들어 가장자리에만 은은하게 두거나, 포커스 링처럼 요소를 감싸는 균일한 테두리 그림자를 만들 때 씁니다.

마무리

그림자는 "있다/없다"가 아니라 "얼마나 떠 있나"를 표현하는 언어다. 위 레시피 표를 디자인 토큰으로 저장해 두면 프로젝트 전반의 깊이감이 일관된다. 색·간격 계산이 필요할 땐 형제 앱 solo 계산기나 tools의 변환 도구를 함께 써보자. 더 넓은 생활·디자인 팁은 kimgoon 라이프스타일 가이드에서 볼 수 있다.

관련 가이드

kimgoon.kr

kimgoon 라이프스타일 가이드

tools.kimgoon.kr

디자인·CSS 가이드 더 보기

tools.kimgoon.kr

단위 변환 도구

solo.kimgoon.kr

solo 자취 계산기

tools.kimgoon.kr

HEX·RGB·HSL 색상 코드 변환 가이드

tools.kimgoon.kr

이미지 종횡비 이해하기 - 16:9·4:3·1:1