CSS 박스 섀도우 생성기
슬라이더로 그림자를 만들고 CSS를 복사하세요.
박스와 배경
브라우저에서 실행됩니다. 입력한 내용은 어디로도 전송되지 않습니다.
- 최대 8개 레이어 쌓기
- 인셋 그림자
- 바로 쓰는 프리셋 6종
CSS 박스 섀도우 만드는 방법
- 프리셋으로 시작하거나 오프셋, 흐림, 번짐 슬라이더를 움직이세요.
- 레이어를 추가하면 더 부드럽고 자연스러운 그림자가 됩니다.
- box-shadow 줄을 CSS에 복사해 붙여넣으세요.
box-shadow 값이 하는 일
| 값 | 의미 | 일반적인 범위 |
|---|---|---|
| 가로 오프셋 | 그림자를 오른쪽으로, 음수면 왼쪽으로 이동 | -100~100px |
| 세로 오프셋 | 그림자를 아래로, 음수면 위로 이동 | -100~100px |
| 흐림 | 가장자리를 부드럽게 함, 0이면 또렷한 그림자 | 0~200px |
| 번짐 | 흐리기 전에 그림자를 키우거나 줄임 | -100~100px |
| 불투명도 | 그림자 색이 얼마나 진하게 보이는지 | 자연스럽게는 10~30% |
자주 쓰는 모양의 시작 값
| 프리셋 | 세로 오프셋 | 흐림 | 번짐 | 불투명도 |
|---|---|---|---|---|
| 소프트 | 10px | 30px | -5px | 20% |
| 샤프 | 6px (가로도 동일) | 0px | 0px | 100% |
| 글로우 | 0px | 24px | 4px | 55% |
| 인셋 | 2px | 6px | 0px | 25% |
'레이어드'와 '플로팅'은 여기에 그림자를 2~3겹 동시에 쌓아 만든 것으로, 레이어 하나만으로는 재현할 수 없습니다.
자연스러운 그림자를 위한 팁
- 실제 빛은 순수한 검정 그림자를 만드는 경우가 거의 없습니다. 불투명도는 10~30%로 두고 색을 배경의 색조에 가깝게 하면 더 부드러워 보입니다.
- '레이어드'와 '플로팅' 프리셋처럼 박스에 가까운 작고 진한 그림자와 조금 떨어진 크고 흐릿한 그림자를 2~3겹 쌓으세요.
- 번짐을 음수로 하고 세로 오프셋을 크게 하면 요즘 인터페이스에서 흔히 보는, 떠 있는 카드 같은 느낌을 낼 수 있습니다.
- overflow: hidden이 설정된 부모 요소는 콘텐츠와 마찬가지로 그림자도 잘라냅니다. 여기저기서 overflow를 없애는 대신 부모 요소에 여백을 추가하세요.
박스 섀도우 생성기 자주 묻는 질문
box-shadow 값은 각각 무엇을 뜻하나요?
순서대로 가로 오프셋, 세로 오프셋, 흐림 반경, 번짐 반경, 색상입니다. 양수 오프셋은 그림자를 오른쪽과 아래로 옮기고, inset 키워드를 붙이면 박스 안쪽에 그려집니다.
그림자를 자연스럽게 만들려면?
불투명도가 낮은 부드러운 그림자를 2~3겹 쌓으세요. 박스에 가깝고 작은 진한 그림자와, 조금 떨어진 크고 흐릿한 그림자를 함께 씁니다. 실제 그림자는 완전한 검정으로 진하게 나타나는 경우가 드뭅니다.
번짐(spread)은 무엇을 하나요?
흐림 효과를 주기 전에 그림자를 키우거나 줄입니다. 번짐을 음수로 하고 세로 오프셋을 크게 하면 카드가 떠 있는 듯한 느낌을 줍니다.
내 그림자가 왜 잘려 보이나요?
overflow: hidden이 설정된 부모 요소는 그림자를 포함해 박스 밖에 그려지는 모든 것을 잘라냅니다. 부모 요소에 여백을 추가하거나 overflow 설정을 없애세요.
그림자 레이어는 몇 개까지 쌓을 수 있나요?
이 페이지에서는 최대 8개입니다. CSS 자체에는 box-shadow 레이어 수 제한이 없지만, 3~4개를 넘으면 보기에는 거의 차이가 없고 렌더링 부담만 늘어납니다.
박스 섀도우가 요소의 크기나 여백에 영향을 주나요?
아니요. box-shadow는 순전히 시각적인 효과로 border나 outline과 달리 레이아웃에 전혀 영향을 주지 않으므로, 추가하거나 크기를 바꿔도 주변 요소가 밀리지 않습니다.