盒阴影生成器

工具介绍

box-shadow 是在元素背后（或内部）绘制阴影的 CSS 属性。手写时需要按顺序填最多五个值——水平偏移、垂直偏移、模糊半径、扩展半径、颜色——外加可选的 inset 关键字，第一次写很容易顺序搞混，或者阴影调得太淡/太重。

这个工具把调参数变成了直接拖动：拖滑块，预览框里的阴影实时变化,效果满意后直接复制 CSS。颜色选择器配合不透明度滑块会自动生成正确的 rgba() 值——毕竟半透明的阴影通常比纯色阴影更真实。

为什么使用它？

• 拖动任意控件即时预览，代码写好之前就能看到最终效果。
• 偏移 X/Y、模糊、扩展、颜色、不透明度全部集中在一个界面里调整。
• 一键切换 inset，做出「按下去」的凹陷效果，而不是悬浮投影。
• 生成的 CSS 里颜色已经按你选的不透明度换算成 rgba()，直接复制即可用。
• 全部在浏览器本地计算，你调整的任何参数都不会上传。
• 免费、不用注册，手机上也能用。

使用方法

1. 调整偏移 X 和偏移 Y 来定位阴影——正值往右/下移，负值往左/上移。
2. 增大模糊半径让阴影边缘更柔和；增大扩展半径可以让阴影比元素本身更大。
3. 选一个颜色并调整不透明度——大多数真实的阴影用 15–40% 的不透明度，而不是纯黑色。
4. 如果想让阴影出现在元素边框内部而不是外部，勾选「内阴影 (inset)」。
5. 复制生成的 CSS，粘贴到你的样式表里。

示例

输入

偏移：0px、10px · 模糊：20px · 扩展：0px · 颜色：黑色，不透明度 35%

输出

box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.35);

元素正下方一圈柔和的阴影，没有水平偏移——卡片和按钮最常用的阴影风格之一。

单层阴影 vs 多层阴影

这个工具生成单层阴影，已经能覆盖绝大多数实际场景——按钮、卡片、弹窗和下拉菜单基本都只用一层阴影。CSS 支持用逗号分隔多个阴影叠加在同一元素上，做出更精细的层次感（比如底下叠一层又紧又深的阴影，上面再叠一层又软又宽的阴影），但这属于进阶用法，可以手动补充：先用这个工具生成一层阴影，复制这一行，再调整第二组数值，用逗号连接两行即可。

常见的 box-shadow 用法

• 轻微的卡片浮起：小偏移（0–4px）、适中模糊（8–16px）、黑色 10–20% 不透明度。
• 浮起的弹窗/下拉菜单：更大的偏移（4–10px）和模糊（20–30px），不透明度 20–35%，让悬浮感更强。
• 按下去的内凹按钮：勾选内阴影，用较小的偏移和适中的模糊，让阴影看起来像凹陷而不是浮起。
• 彩色光晕：用品牌色代替黑色，不透明度调到 40–60%，稍微增大扩展半径，做出按钮周围柔和的光晕效果。
• 锐利/硬边阴影：把模糊和扩展都设为 0，得到实心的偏移剪影，而不是柔和的阴影。

配合圆角一起用

阴影和圆角几乎总是一起出现——卡片、按钮和弹窗基本都会同时用到。可以用「圆角生成器」给同一个元素加上圆角，再把两段生成的 CSS 一起用上。

→ 圆角生成器 · 单位换算器

常见问题