사용 방법
- 프리셋을 선택하거나 첫 번째 레이어의 오프셋, 흐림, 확산, 색상, 투명도를 조정하세요.
- 레이어를 더 추가해 자연스러운 입체감을 주거나 “Inset”을 선택해 안쪽 그림자를 만드세요.
- 디자인에 맞게 미리보기 배경과 상자 색상을 변경한 다음 CSS를 복사하세요.
작동 방식
box-shadow는 레이어마다 가로 오프셋, 세로 오프셋, 흐림 반경, 확산 반경, 색상을 지정하며, 앞에 inset을 선택적으로 추가할 수 있습니다. 양수 오프셋은 그림자를 오른쪽과 아래쪽으로 이동합니다. 흐림은 가장자리를 부드럽게 하며 음수로 설정할 수 없습니다. 확산은 흐림 처리 전에 그림자를 키우거나(양수) 줄입니다(음수). 여러 레이어는 쉼표로 구분하며, 첫 번째 레이어가 맨 위에 표시됩니다.
자연스러운 입체감을 내려면 보통 작고 선명한 그림자와 투명도가 낮은 크고 부드러운 그림자를 함께 사용합니다. “입체감” 프리셋이 이런 조합을 사용합니다. 색상은 투명도를 명시할 수 있도록 rgba() 형식으로 작성합니다. 그림자는 요소의 border-radius를 따르며 레이아웃 공간을 차지하지 않으므로 다른 요소를 밀어내지 않습니다.
여러 요소에 매우 큰 흐림 값을 적용하면 사양이 낮은 휴대폰에서 스크롤이 느려질 수 있습니다. 그림자에 애니메이션을 적용할 때는 보통 box-shadow 자체에 애니메이션을 적용하는 것보다, 그림자가 이미 적용된 의사 요소를 페이드 인하는 편이 더 부드럽습니다.
예시
밝은 페이지의 카드
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 8px 24px -4px rgba(0, 0, 0, 0.18);를 적용하면 카드 가장자리는 선명하게, 그림자는 부드럽게 표현됩니다.
레이아웃 이동 없는 포커스 링
브랜드 색상으로 오프셋 0, 흐림 0, 확산 3px인 레이어를 추가하면 버튼 주위에 선명한 테두리가 생깁니다. 테두리와 달리 요소 크기에 영향을 주지 않습니다.
눌린 입력 필드
inset 0 2px 6px 0 rgba(0, 0, 0, 0.25)를 적용하면 텍스트 필드가 살짝 들어간 것처럼 보입니다.
자주 묻는 질문
box-shadow와 filter: drop-shadow()는 어떻게 다른가요?
box-shadow는 요소의 상자와 border-radius를 따르며 확산과 inset을 지원합니다. drop-shadow()는 PNG 또는 SVG 이미지의 투명 영역을 포함해 보이는 모양을 따르지만, 확산이나 inset은 지원하지 않습니다.
그림자가 잘리는 이유는 무엇인가요?
overflow: hidden이 적용된 부모 요소는 그림자를 포함해 상자 밖으로 나가는 모든 내용을 잘라냅니다. 부모 요소에 여백을 추가하거나 overflow 규칙을 옮기세요.
레이어를 몇 개 사용해야 하나요?
대부분의 인터페이스에는 한두 개면 충분합니다. 레이어를 더 추가하면 더 부드럽게 보일 수 있지만 렌더링 비용이 조금 늘어나므로 긴 목록에서는 영향을 줄 수 있습니다.
개인정보 보호
CSS는 브라우저에서 생성됩니다. 업로드되거나 저장되지 않습니다.