CSS 박스 섀도우 생성기
box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.15);Drop Shadow
최종 업데이트: 2026년 · 무료 온라인 도구
CSS 박스 섀도우 생성기란?
시각적 에디터로 CSS box-shadow를 만들고 코드를 복사하는 무료 온라인 도구
사용 방법
- 1 프리셋 선택 — 프리셋 버튼으로 빠르게 시작하세요.
- 2 슬라이더 조정 — X/Y 오프셋, 블러, 확산 슬라이더로 그림자를 조정하세요.
- 3 미리보기 확인 — 상단 미리보기에서 실시간으로 결과를 확인하세요.
- 4 CSS 복사 — 복사 버튼으로 box-shadow CSS를 가져가세요.
관련 도구
자주 묻는 질문
네, '그림자 추가' 버튼으로 여러 개의 그림자를 겹칠 수 있습니다.
네, 각 그림자에서 Inset 체크박스를 활성화하면 내부 그림자가 됩니다.
Subtle, Medium, Large, Inset, Double 5가지 프리셋을 제공합니다.
네, 색상 입력란에 rgba(0,0,0,0.15) 형태로 직접 입력할 수 있습니다.
아니요. 모든 계산은 브라우저에서 이루어집니다.