CSS 그림자 시각적으로 디자인하기
그림자는 인터페이스에 깊이감을 더해줍니다. 카드를 페이지에서 돋보이게 하고, 어떤 버튼이 눌렸는지 보여주며, 대화상자를 배경 콘텐츠와 분리해 줍니다. CSS box-shadow 속성은 강력하지만, 5개의 숫자를 눈으로 보지 않고 조절하기는 까다롭습니다. 이 생성기는 슬라이더와 실시간 미리보기를 제공하며, 여러 개의 그림자를 겹쳐 자연스러운 효과를 만들고, 프로젝트에 바로 붙여넣을 수 있는 깔끔한 CSS 코드를 출력합니다.
주요 기능
- 실시간 미리보기가 지원되는 오프셋(Offset), 흐림(Blur), 확산(Spread), 색상 및 불투명도 조절.
- 하나의
box-shadow속성에 최대 5개의 레이어 결합. - 눌리거나 움푹 패인 효과를 위한 내부 그림자(Inset).
- 디자인에 맞출 수 있는 모서리 둥글기(Corner radius) 및 미리보기 색상 설정.
- 부드러운, 중간, 강한, 레이어, 내부 및 네온(Glow) 그림자를 위한 프리셋 제공.
rgba()형식의 색상이 적용된 바로 복사 가능한 CSS 코드.
예시
밝은 배경에서 자연스럽게 보이는 레이어 그림자 예시입니다:
.card {
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.07),
0px 4px 8px 0px rgba(0, 0, 0, 0.07),
0px 16px 32px 0px rgba(0, 0, 0, 0.07);
border-radius: 16px;
}
그림자 디자인 팁
| 목적 | 추천 설정 |
|---|---|
| 흰색 배경의 은은한 카드 | y 4, blur 12, opacity 8% |
| 떠 있는 드롭다운 또는 대화상자 | 2–3개 레이어, y 최대 24, blur 최대 48, 각 opacity 7–12% |
| 레트로 "플랫" 스타일 | x 6, y 6, blur 0, opacity 100% |
| 포커스 또는 네온(Glow) 효과 | x 0, y 0, blur 16–24, spread 2–4, 브랜드 색상 |
| 눌린 입력 필드 | inset, y 2, blur 6, opacity 25–30% |
광원의 위치를 일관되게 유지하세요. 한 요소의 그림자가 아래로 향한다면, 다른 모든 요소의 그림자도 아래로 향해야 합니다.
관련 도구
CSS 그라데이션 생성기로 카드 배경을 만들거나, 색상 변환기로 HEX, RGB, HSL 색상을 변환하고, 이미지 색상 추출기를 사용해 스크린샷에서 색상을 추출해 보세요.