슬라이더로 그림자 맞추기
미리보기 박스를 보며 값을 조절한 뒤 box-shadow 한 줄을 복사하세요. 각 값이 그림자를 이렇게 바꿉니다.
| 속성 | 효과 |
|---|---|
| offsetX / offsetY | 그림자가 놓이는 가로·세로 위치 |
| blur | 가장자리 흐림 정도(클수록 부드러움) |
| spread | 그림자 크기 확장·축소 |
| color | 그림자 색과 투명도 |
| inset | 안쪽으로 파인 그림자 |
자연스러운 그림자의 비결
- 검정 100%는 피하세요. 실제 그림자는 완전한 검정이 아닙니다.
rgba(0,0,0,0.15)처럼 투명도를 낮추면 훨씬 자연스럽습니다. - offsetY를 offsetX보다 크게. 빛은 보통 위에서 오므로 그림자는 아래로 깁니다.
- 여러 겹 쌓기. 옅은 그림자 두세 개를 겹치면(가까운 작은 그림자 + 멀고 넓은 그림자) 단일 그림자보다 입체감이 좋습니다.
inset은 언제
inset은 요소 안쪽에 그림자를 넣어, 눌린 버튼이나 입력창 안쪽 음영을 표현할 때 씁니다.