16px
第 1 层
10%
至少保留 1 层阴影。
Help
关于此工具
用可视化方式调出 CSS 阴影并一键取走代码。最多可叠加 5 层，每层都能单独设置水平 / 垂直偏移、模糊半径、扩散半径、颜色、不透明度与 inset 开关，并可通过上下移动与删除来调整叠加顺序。预览随参数实时更新，还可调整预览元素的圆角与背景色，方便在不同底色上观察效果。内置 subtle、card、elevated、inset-pressed 等预设，一键套用便于快速对比。输出的是标准 box-shadow 声明，可直接粘进样式表。全部处理在你的浏览器内完成，不上传任何数据。
使用方法
- 先选一个预设（subtle / card / elevated / inset-pressed）作为起点。
- 调整每层的偏移 X、偏移 Y、模糊半径、扩散半径、颜色与不透明度，并用 inset 开关切换内阴影。
- 点「添加层」叠加最多 5 层阴影，再用上下箭头与删除按钮调整顺序或移除图层。
- 调整预览元素的圆角与背景色，然后复制生成的 box-shadow CSS 到你的样式表。
box-shadow 的五个参数分别是什么？
box-shadow 依次接受 offset-x、offset-y、blur-radius、spread-radius 与 color。offset-x 与 offset-y 决定阴影的水平 / 垂直位移（负值向左 / 向上），blur-radius 控制边缘的模糊程度，spread-radius 让阴影整体放大或缩小（负值收缩），color 设置阴影颜色。可选的 inset 关键字可把阴影画在元素内部。
多层阴影怎么工作？顺序对结果有影响吗？
可以在一条 box-shadow 声明里用逗号分隔多个阴影。它们按书写顺序从前往后绘制，排在前面的阴影会盖在后面的之上，因此调整层的顺序会改变阴影重叠处的显示效果。
inset 是什么？
inset 让阴影画在元素边框盒的内侧而不是外侧，常用于按钮的按下态或内凹的容器。同一条声明里可以混合使用 inset 层与普通层。
为什么不透明度要单独调（转成 rgba）？
原生取色器只能给出实的十六进制颜色，所以透明度用单独的滑杆控制。生成器会把两者合成 rgba(r, g, b, a) 输出，这样可以在不改变色相的前提下淡化阴影。
我的阴影会被上传到服务器吗？
不会。预览与代码生成完全在你的浏览器内完成，不会向任何地方发送数据。