CSS Box Shadow 생성기

슬라이더를 사용하여 CSS box-shadow 속성을 시각적으로 생성합니다.

스튜디오 · 중성 환경
0px
8px
24px
-6px
14%

  

기능

Slider controls
Color picker
Inset toggle
Multiple layers
Live preview & CSS code

사용 방법

1. 슬라이더로 그림자를 다듬으세요 — 스테이지의 중성 카드가 실제 결과 그대로를 보여줍니다.

2. 실제 그림자는 여러 층입니다: 최대 4개 레이어를 쌓거나 프리셋(Soft / Elevated / Floating / Inner)에서 시작하세요.

3. 배경을 바꿔 흰색·회색·짙은색 위에서 그림자를 확인한 뒤 CSS를 복사하세요.

자주 묻는 질문

What is box-shadow?
The CSS box-shadow property adds shadow effects around an element's frame.

관련 도구