Box Shadow - 开发工具 · 萤炬工具箱

Box Shadow 生成器让你通过可视化拖拽与滑块调节阴影的偏移、模糊、扩散与颜色，实时预览效果后一键复制 CSS 代码。省去手动试 px 值的来回，适合快速做卡片悬浮效果、立体按钮、内嵌阴影等。支持多层阴影叠加，每层独立控制。支持多层阴影叠加，用逗号分隔，先写的层在上。阴影不计入元素尺寸，不会触发滚动条或影响布局。

Box Shadow 生成器让你通过可视化拖拽与滑块调节阴影的偏移、模糊、扩散与颜色，实时预览效果后一键复制 CSS 代码。省去手动试 px 值的来回，适合快速做卡片悬浮效果、立体按钮、内嵌阴影等。支持多层阴影叠加，每层独立控制。

使用步骤

1. 拖动滑块调整水平偏移、垂直偏移、模糊半径、扩散半径与颜色。
2. 实时预览框显示当前阴影效果，可添加多层阴影叠加。
3. 点击复制按钮获取完整 CSS box-shadow 代码，直接粘贴到样式表。

功能与限制

• 支持多层阴影叠加，用逗号分隔，先写的层在上。
• 阴影不计入元素尺寸，不会触发滚动条或影响布局。
• 模糊半径越大，浏览器绘制开销越高，移动端注意性能。

常见问题

box-shadow 的扩散半径是什么？

扩散半径（spread-radius）控制阴影在模糊前先膨胀或收缩多少像素：正值使阴影扩大，负值使阴影缩小，常用于做细边光晕。

如何实现内阴影效果？

在 box-shadow 最前面加 inset 关键字，阴影会绘制在元素内部而非外部，常用于做内凹或内嵌效果。

多层阴影怎么写？

用逗号分隔多组 box-shadow 值，浏览器会依次绘制每层，先写的在上层。常见搭配是一层主阴影加一层浅色高光。

box-shadow 会影响布局吗？

不会。阴影绘制在视觉层，不占据文档流空间，不会撑开父容器或挤动相邻元素，与 outline 类似。