프리셋
미리보기
그림자 1
4px
4px
10px
0px
20%
CSS 코드
box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.2);
🎨 Box Shadow 생성기란?
Box Shadow 생성기는 CSS box-shadow 속성을 시각적으로 편집하고 실시간 미리보기를 제공하는 도구입니다. X/Y 오프셋, 흐림, 확산, 색상, 투명도를 슬라이더로 조절하며 여러 그림자를 레이어링할 수 있습니다. 소프트 그림자, 하드 그림자, 네온 효과, 인셋 등 다양한 프리셋으로 빠르게 시작하고 커스터마이즈할 수 있습니다. 생성된 CSS 코드는 복사 버튼으로 바로 가져갈 수 있어 개발 워크플로우에 즉시 적용 가능합니다.
📊 그림자 속성 가이드
| 속성 | 설명 | 권장 값 |
|---|---|---|
| X 오프셋 | 수평 방향 이동 | -20px ~ 20px (일반적) |
| Y 오프셋 | 수직 방향 이동 | 4px ~ 16px (자연스러운 그림자) |
| 흐림 (Blur) | 그림자 퍼짐 정도 | 10px ~ 40px (소프트), 0 (하드) |
| 확산 (Spread) | 그림자 크기 증감 | 음수: 축소, 양수: 확장 |
| Inset | 내부 그림자 | 버튼 눌림 효과, 입력 필드 |
💡 그림자 디자인 팁
- 레이어드 그림자: 여러 그림자를 쌓아 자연스러운 깊이감 표현
- 컬러 그림자: 검정 대신 요소 색상의 어두운 버전 사용
- 소프트 UI: 밝은 그림자 + 어두운 그림자 조합 (neumorphism)
- 호버 효과: Y 오프셋과 블러를 늘려 떠오르는 느낌
- 성능: 모바일에서 blur가 큰 그림자는 렌더링 비용이 높음
자주 묻는 질문
여러 그림자를 사용하는 이유는?▼
단일 그림자는 평면적으로 보입니다. 여러 그림자를 레이어링하면 가까운 그림자(작고 진함)와 먼 그림자(크고 흐림)가 결합되어 자연스러운 깊이감을 만듭니다.
spread 값이 음수면 어떻게 되나요?▼
그림자가 요소보다 작아집니다. 이를 활용해 요소 바로 아래에만 그림자를 표시하거나, 특정 방향으로만 그림자가 나타나도록 할 수 있습니다.
inset 그림자는 언제 사용하나요?▼
버튼의 눌린 상태, 입력 필드의 안쪽 테두리 효과, 카드의 오목한 영역 등을 표현할 때 사용합니다. 요소가 눌려 들어간 듯한 느낌을 줍니다.