CSS 阴影生成器
可视化调整 CSS box-shadow：多层阴影的增删、水平垂直偏移、模糊、扩散、颜色与内阴影，实时预览并复制代码。
浏览器本地运行所有计算都在你的浏览器里完成，数据不会离开本机。
阴影层
排在前面的阴影盖在后面的上面，多层阴影用逗号分隔
预设
点击任意预设直接套用
预览
预览卡片会实时反映当前的阴影
CSS 代码
box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
这个工具能做什么
- 调卡片、按钮的悬浮效果时实时拖参数，比在 DevTools 里反复改数值快得多，满意后直接复制 `box-shadow` 声明。
- 做多层阴影：一层柔和的投影加一层彩色光晕，每层单独设置偏移、模糊、扩散和颜色，顺序就是层叠顺序。
- 用预设快速起步：柔和、悬浮、内阴影、多层霓虹四种现成组合，套用后再微调。
- 需要带透明度的颜色时输入 8 位 HEX（如 #1F818666），工具会自动换算成 rgba()，避免手算 alpha。
示例
输入
预设「柔和」：0px 4px 10px 0px，颜色 #0000001A，非内阴影
输出
box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
8 位 HEX 的后两位是 alpha（0x1A / 255 ≈ 0.1），工具把它换算成 rgba() 输出；若换成 6 位不透明色则直接输出 HEX。
常见问题
颜色为什么有时输出 HEX，有时输出 rgba()？
看 alpha 是否小于 1。写 6 位 HEX（#4D6BFE）或 8 位但后两位是 FF 时输出大写的 HEX；写 8 位带透明度（#1F818666）时换算成 rgba()，因为大多数项目里 rgba 更易读。只接受 HEX 写法，`red`、`rgb(0,0,0)` 这类会报「阴影颜色必须是合法的 HEX 值」。
扩散（spread）可以是负数吗？
可以，负数会让阴影收缩，常用于「贴着元素底部一条窄阴影」的效果，预设里的「悬浮」就用了 −6px。模糊不能为负，输入负值会被夹到 0；偏移、模糊、扩散都会被限制在 ±1000px 以内。
多层阴影的顺序有讲究吗？
有。CSS 里逗号分隔的阴影列表，靠前的画在上层。所以要做「上层小而深、下层大而淡」的立体感，就把小而深的那层写在前面。工具里层与层的上下顺序就是数组顺序，可以直接拖动新增/删除层来调整。
内阴影和外阴影能混用吗？
能。每层单独勾选「内阴影」，勾上后输出会在该层最前面加 `inset`，例如 `inset 0px 2px 6px 0px rgba(0, 0, 0, 0.2)`。混用时注意内阴影画在元素内部，通常要用较小的偏移和模糊。
生成的代码能直接用吗？
能，输出就是一行标准的 `box-shadow: …;` 声明，粘进样式表即可。工具不发任何网络请求，预览用的是页面内的真实 DOM 元素，所见即所得；需要注意的是复制走的只是声明，不含选择器。
关键词：cssbox-shadowshadowinsetelevation阴影盒子阴影内阴影投影多层阴影开发工具