Box Shadow 생성기
offset·blur·spread·색상을 슬라이더로 조절하면 그림자가 즉시 미리보기에 반영됩니다. 여러 레이어를 쌓아 깊이 있는 그림자도 가능.
그림자 레이어
CSS
사용 방법
1
레이어 조절
레이어별로 X·Y 오프셋, blur, spread, 색상, inset 여부를 설정하세요. 슬라이더를 움직이면 미리보기가 즉시 업데이트됩니다.
2
레이어 추가/삭제
+ 버튼으로 그림자 레이어를 최대 5개까지 쌓을 수 있습니다. 멀티 레이어로 부드러운 그림자나 머티리얼 디자인 효과를 만들 수 있습니다.
3
코드 복사
결과 box-shadow CSS는 한 번에 복사 가능합니다. background:, border-radius:도 함께 미리보기에서 확인하세요.
자주 묻는 질문
몇 개의 레이어까지 가능한가요?
최대 5개까지 쌓을 수 있습니다. 머티리얼·neumorphism 같은 효과는 보통 2~3개로 충분합니다.
inset 그림자는 무엇인가요?
요소 바깥이 아니라 안쪽으로 들어간 그림자입니다. 버튼 누름 효과, 우물 같은 깊이감 표현에 사용합니다.
음수 spread를 쓰면?
spread가 음수면 그림자가 요소보다 작아져, 모서리 한쪽만 살짝 드러나는 형태를 만들 수 있습니다.
box-shadow와 drop-shadow 차이는?
box-shadow는 요소의 사각 박스에 그림자를 만들고, filter: drop-shadow()는 요소의 실제 모양(투명 PNG·SVG)에 그림자를 그립니다. 모양이 사각이면 box-shadow가 더 가볍습니다.
데이터가 서버에 전송되나요?
아닙니다. 모든 작업은 브라우저에서만 이루어지며, 만들어진 CSS는 외부로 전송되지 않습니다.
