CSS 盒阴影生成器

拖动滑块，在卡片上实时查看效果，轻松制作 box-shadow。最多可叠加六层，打造更柔和、更真实的阴影；用 inset 做出按下去的效果；也可以从柔和、悬浮、发光、新拟态等预设开始。一键复制 CSS。

背景方块

圆角px

阴影图层

水平px

垂直px

模糊px

扩展px

颜色

Inset（内阴影）

不透明度%

预设

CSS

模糊和扩展有什么作用？
模糊会让阴影边缘更柔和，为零时边缘是锐利的。扩展会在模糊之前向各个方向放大阴影，负值则会缩小，有助于让大范围模糊的阴影保持在元素下方。

为什么要使用多层阴影？
现实中的阴影在靠近物体处更深，越远越淡。把小而锐利的阴影与大而柔和的阴影组合起来可以模拟这种效果，比单层阴影更自然。列表中的第一层绘制在最上面。

box-shadow 会拖慢页面吗？
正常使用不会。在大量元素上使用特别大的模糊，或者对阴影本身做动画，可能会在性能较弱的手机上造成负担；如需动画，请改为调整带有阴影的伪元素的不透明度。