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）则在模糊之前放大或缩小阴影的尺寸。