개발자 도구

CSS Box Shadow 생성기

실시간 미리보기로 다층 CSS 박스 그림자를 시각적으로 구성 — 클릭 한 번으로 CSS 복사

Preview

Shadow Layers

(1/8)
Enabled
Inset
-100px0100px
-100px0100px
0px0100px
-50px050px
#6366F1
Opacity50%

CSS Output

box-shadow: 0px 8px 24px -4px rgba(99, 102, 241, 0.5);

CSS Box Shadow Generator

Build multi-layer CSS box shadows visually with live preview. Adjust offset, blur, spread, color, and opacity for each layer, then copy the ready CSS.

FAQ

What is the CSS box-shadow syntax?

box-shadow: offset-x offset-y blur-radius spread-radius color. Example: box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1).

How do I add multiple shadows?

Separate multiple shadow values with commas: box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 10px 40px rgba(0,0,0,0.05).

What is an inset shadow?

Adding the 'inset' keyword makes the shadow appear inside the element rather than outside — useful for pressed button states.

필요한 게 없나요?

커뮤니티 피드백으로 무료 도구를 만듭니다. 워크플로에 필요한 도구를 제안해 주세요!

CSS Box Shadow 생성기 — 무료 도구 온라인 | FreeTool24 | FreeTool24