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