CSS box-shadow를 슬라이더로 조절하며 실시간 미리보기와 코드를 동시에 만듭니다. 한 번 클릭으로 코드 복사 가능.
CSS 코드
CSS 박스섀도 생성기 사용법
- X·Y 오프셋으로 그림자 위치를 조정합니다.
- 흐림(Blur)으로 그림자의 부드러움을, 퍼짐(Spread)으로 크기를 조절합니다.
- 색상과 투명도를 설정합니다.
- "안쪽 그림자(inset)"를 체크하면 박스 내부에 그림자가 들어갑니다.
- 복사 버튼으로 CSS 코드를 가져갑니다.
주요 기능
- X / Y / Blur / Spread / Color / Opacity / Inset 모든 속성 지원
- 실시간 미리보기 — 슬라이더 움직일 때마다 즉시 반영
- RGBA 색상 자동 변환
- 한 번 클릭으로 CSS 코드 복사
- 완전 무료, 외부 통신 없음
활용 예시
- 카드 UI — 부드러운 떠 있는 효과
- 버튼 — 클릭 가능한 입체감
- 모달·팝업 — 배경과 분리되는 강한 그림자
- 안쪽 그림자(inset) — 입력창·움푹한 효과
- 네오모피즘 — 두 그림자(밝은+어두운) 조합
속성 설명
box-shadow: x y blur spread color [inset]; 형태입니다. X/Y는 그림자 위치(양수=오른쪽·아래), Blur는 흐림 정도(클수록 부드러움), Spread는 그림자 크기 확장(음수면 작아짐), Inset은 안쪽 그림자 토글입니다.
자주 묻는 질문
그림자를 여러 개 겹칠 수 있나요?
가능합니다. CSS는 box-shadow: 0 4px 6px #0001, 0 10px 25px #0002;처럼 콤마로 구분해 여러 그림자를 합칠 수 있습니다. 본 도구의 출력 코드를 두 번 만들어 직접 합치세요.
왜 그림자가 잘 안 보이나요?
투명도가 너무 낮거나 색상이 배경과 비슷한 경우입니다. 또는 부모 요소에 overflow: hidden이 있으면 그림자가 잘릴 수 있습니다.
성능에 영향을 주나요?
매우 큰 Blur 값(50px+)을 많은 요소에 적용하면 모바일에서 렌더링이 느려질 수 있습니다. 일반적인 범위(10~30px)는 문제없습니다.
filter: drop-shadow와의 차이는?
box-shadow는 박스 형태에만 그림자를 만들고, filter: drop-shadow는 PNG 투명 영역도 인식해 모양을 따라 그림자를 만듭니다. 일반 UI는 box-shadow, 아이콘/이미지는 drop-shadow를 사용하세요.