每次写 box-shadow 时，你是不是都要打开 DevTools 慢慢调四个数字？偏移、模糊、扩散、颜色……光靠感觉很难一次到位。Box Shadow 在线生成器让你拖拽调参、实时预览，直接复制可用代码。
语法拆解
box-shadow: [inset] <offset-x> <offset-y> [blur-radius] [spread-radius] [color];| 值 | 说明 |
|---|---|
inset | 可选。将阴影绘制在元素内部。 |
offset-x | 水平偏移。正值向右，负值向左。 |
offset-y | 垂直偏移。正值向下，负值向上。 |
blur-radius | 可选（默认 0）。值越大，边缘越柔和。不能为负。 |
spread-radius | 可选（默认 0）。正值扩大，负值收缩。 |
color | 可选，省略时为 currentcolor。任意 CSS 颜色，推荐用 rgba() 控制透明度。 |
inset 与颜色也可以写在长度值之后，长度值必须连在一起、按上表顺序（MDN：box-shadow）。
常见效果写法
卡片投影（最常用）
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);两层叠加：一层颜色较深、贴近元素的紧凑阴影，加一层较浅、更柔和的阴影。
inset 内阴影
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);常用于输入框、按压态按钮，营造”凹入”感。
硬阴影（无模糊）
box-shadow: 4px 4px 0 #000;blur 为零，阴影完全锐利，是新野兽派（Neubrutalism）界面的常见写法。
发光效果
box-shadow: 0 0 12px 4px rgba(99, 102, 241, 0.5);两个 offset 都为零，阴影向四周均匀扩散。可以搭配品牌色做悬停态。
多层阴影叠加
box-shadow 支持逗号分隔叠加多层，可以模拟更自然的光影层次：
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.07),
0 2px 4px rgba(0, 0, 0, 0.07),
0 4px 8px rgba(0, 0, 0, 0.07),
0 8px 16px rgba(0, 0, 0, 0.07);每层偏移和模糊翻倍，透明度相同，叠加后过渡平滑。这种写法见 Tobias Ahlin 的 Smoother & sharper shadows with layered box-shadows。
性能注意事项
box-shadow 会触发重绘（Paint）但不触发重排（Layout）。box-shadow 过渡的每一帧都要重绘元素，元素单独占一个合成层也一样。
如果需要动画，不要直接 transition: box-shadow，低端设备上容易掉帧。推荐方案是用伪元素承载最终阴影，动画 opacity（Tobias Ahlin：How to animate box-shadow）：
.card {
position: relative;
}
.card::after {
content: '';
position: absolute;
inset: 0;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
opacity: 0;
transition: opacity 0.25s;
border-radius: inherit;
}
.card:hover::after {
opacity: 1;
}为什么用生成器
手动调四个数字加颜色，每次改完还要回到浏览器刷新验证——这个循环太慢了。生成器的优势：
- 用滑块调节偏移，实时看效果
- 滑块调节模糊和扩散
- 一键切换 inset 模式
- 直接复制 CSS，不用手敲
ZeroTool 的生成器一次编辑一层阴影（偏移与扩散 −50～50 px，模糊 0～100 px，不透明度 0～100%），多层阴影需要把几次输出用逗号手动拼接。
速查表
| 效果 | CSS |
|---|---|
| 基础投影 | box-shadow: 0 4px 6px rgba(0,0,0,0.1) |
| 内阴影 | box-shadow: inset 0 2px 4px rgba(0,0,0,0.15) |
| 发光 | box-shadow: 0 0 8px 2px rgba(99,102,241,0.4) |
| 硬阴影 | box-shadow: 3px 3px 0 #000 |
| 移除阴影 | box-shadow: none |