CSS Box Shadow 生成器
通过滑块直观调整 box-shadow。多层、inset 切换、实时预览、一键复制 CSS。
完全免费
无需注册
浏览器内完成
5 种语言
深色模式
阴影层
预览
12px
CSS
预设
📖 常见的坑
用滑块构建 box-shadow，叠加多层并导出 CSS。全部处理都在浏览器内完成。预览就是你当前浏览器的实际渲染，因此在其他浏览器或系统上，模糊的渐变可能略有差异。若需要像素级完全一致，请在真机上确认。
| 情形 | 会发生什么 | 怎么处理 |
|---|---|---|
| 混淆 blur 与 spread | blur 是边缘的柔和程度，spread 是阴影本身的放大缩小。提高 spread 会让轮廓依旧清晰的阴影向外扩张，看起来比预期更重。 | 自然的阴影通常需要较大的 blur 与负的 spread。例如 0 4px 12px -2px rgba(0,0,0,.15)，先略微收缩再模糊，阴影就会从元素正下方柔和地升起。 |
| 给带阴影的元素做动画很卡 | 直接对 box-shadow 的值做过渡，意味着每一帧都要重新绘制模糊。在卡片列表悬停这类多个元素同时变化的场景，仅此一项就会明显变卡。 |
把阴影放到 ::after 伪元素上，只对其 opacity 做过渡。opacity 与 transform 由合成层处理，既不触发布局也不触发重绘。will-change 会增加图层并占用内存，请只加在确实卡顿的元素上。 |
| 只有阴影显得很突兀 | 单层浓黑的阴影与真实阴影的观感不同。真实阴影随着离光源越远而越宽越淡，并会略带周围的颜色。单色单层会让元素看起来像被剪下来贴上去的。 | 请叠加 2~3 层淡阴影。常见组合是一层近而小、稍深的（0 1px 2px rgba(0,0,0,.10)），加一层远而大、更淡的（0 8px 24px rgba(0,0,0,.08)）。颜色不要用纯黑，掺一点背景色相会更协调。Material Design 与 Apple HIG 都采用这种叠加方式。 |
box-shadow 只会投射元素盒子（含圆角）的形状。给透明 PNG 徽标或 SVG 图标加阴影会得到一个矩形阴影，此时应改用 filter: drop-shadow()，它会沿着 Alpha 通道的形状。不过 drop-shadow 没有 spread，多个叠加会造成滤镜链式开销，因此应按场景选择。
📖 使用方法
-
1
用滑块调整阴影直观调整 X / Y / 模糊 / 扩展 / 颜色 / 不透明度
-
2
添加图层点击 "+ 添加" 叠加多层。CSS 自动用逗号分隔
-
3
复制 CSS一键复制生成的 box-shadow
❓ 常见问题
在哪里粘贴？
在任何 CSS 选择器内。例：.card { box-shadow: ... }
inset 是什么？
在元素内部绘制阴影。可用于按钮按下效果
为什么组合多个阴影？
叠加柔和的近影和较长的远影可创建真实立体感 (Material Design / Apple HIG 常用)
🐛 此工具出现问题了吗？
免费、无需注册。仅提供复现步骤也有帮助。报告将直接发送给运营者并用于改进。
✅
感谢您的反馈！
已送达运营者,将用于改进工具。