图层
0px
4px
12px
0px
15%
预设
实时预览
本地处理
关于此工具
CSS box-shadow 在元素边框周围绘制一个或多个阴影。每个阴影是一组值：一个可选的 inset 关键字、水平和垂直偏移、一个模糊半径、一个扩展半径以及一种颜色。多个阴影以逗号分隔并从后向前绘制，因此列表中的第一个位于最上层。叠加多层低不透明度的阴影正是构建逼真层级感、柔和环境光和内发光的方法——单个阴影很少看起来自然。
用它来设计卡片和模态框的层级感，调试焦点环和内发光效果，用堆叠的图层重现 Material 风格的纵深感，或在将悬停状态写入样式表之前快速制作原型。选择一个预设作为起点，调整每一层的滑块，开启 inset 以制作凹陷阴影，然后将生成的规则直接粘贴到你的 CSS 或 Tailwind 任意值中。
颜色以 rgba() 形式输出，因此不透明度滑块直接映射到 alpha 通道——底层的 hex 保持不变，从而让该值之后仍易于手动调整。
常见问题
如何创建分层（多层）的 box-shadow？
在单个 box-shadow 声明中提供多个以逗号分隔的阴影定义。每一层独立渲染并从后向前堆叠，列出的第一个阴影绘制在最上层；组合几层低不透明度的阴影比单个阴影产生更柔和、更逼真的纵深感。
box-shadow 中模糊和扩展有什么区别？
模糊是第四个值，控制阴影边缘的柔和程度——值越高边缘越虚化。扩展是可选的第五个值，会在应用模糊之前增大（正值）或缩小（负值）阴影的尺寸，因此负扩展会使阴影更紧贴元素。
box-shadow 中的 inset 关键字有什么作用？
添加 inset 会在元素盒子内部而非外部绘制阴影，从而产生凹陷或内发光效果。若不带 inset，阴影会向外绘制，呈现为普通的投影。