CSS Box Shadow 產生器

以視覺化方式建立 CSS box-shadow 值。即時預覽並複製產生的 CSS。

X 偏移: 0px

Y 偏移: 8px

模糊: 16px

擴展: 0px

box-shadow: 0px 8px 16px 0px #00000033;

如何使用本工具

1
Drag the X offset and Y offset sliders (each from -50px to 50px) to move the shadow horizontally and vertically.
2
Adjust the Blur slider (0px to 100px) to soften the edges, and the Spread slider (-50px to 50px) to grow or shrink the shadow.
3
Pick a shadow color with the color swatch; the live preview square updates as you change any control.
4
Copy the generated box-shadow declaration from the output box at the bottom and paste it into your stylesheet.

CSS 的 box-shadow 屬性接受水平偏移、垂直偏移、模糊半徑、擴展半徑和顏色。可以疊加多個陰影來實現分層效果。這款視覺化產生器能為任意組合產生 CSS：適用於按鈕、卡片和景深效果。

Designing a soft elevation shadow for buttons or cards, then tuning Y offset and blur until the depth looks right.
Prototyping a Material-style shadow by stacking the value this tool outputs with a second hand-written shadow.
Generating a tight, low-blur shadow with negative spread for a crisp focus or hover state.
Getting an exact box-shadow string to paste into a Tailwind arbitrary value, CSS module, or inline style.
Teaching the difference between blur and spread by dragging each slider and watching the preview react.
Quickly matching a shadow from a design mockup by eyeballing offsets against the live preview square.

如何疊加多個陰影？▼

在 box-shadow 的值中用逗號分隔它們。疊加它們能創造出比單個陰影更逼真的景深。

模糊和擴展有什麼差別？▼

模糊（blur）會柔化陰影的邊緣；擴展（spread）則在模糊之前放大或縮小陰影的尺寸。