CSS阴影生成器

box-shadow 是 CSS 里给盒子加投影的属性，一条声明里塞了水平偏移、垂直偏移、模糊半径、扩展距离和颜色几个数值，全靠脑子换算很难一次调准。这个 CSS 阴影生成器把这些参数拆成可视化控件，你拖动滑块或直接输入数值，右侧的预览方块立刻按真实渲染呈现效果，下方同步给出可直接复制的 box-shadow 代码。它省去了改一行 CSS、切回浏览器刷新、再回来微调的反复循环，尤其适合需要反复试不同模糊和透明度、找投影手感的场景。所有参数计算都在浏览器本地完成，不涉及上传。

box-shadow 的完整语法是 [inset] offset-x offset-y blur-radius spread-radius color，前两个值决定阴影相对盒子的水平和垂直位移，正值向右下、负值向左上。模糊半径越大边缘越柔和，为 0 时是硬边；扩展距离在模糊之前先把阴影整体放大或缩小，负值可以让阴影比盒子更小、只从某一侧露出来。颜色部分通常配合透明度用 rgba 书写，让投影半透明、能透出底色，这也是这个盒子阴影工具单独给出透明度调节的原因。生成器本质上是把这些参数拼成字符串，通过内联样式套到预览元素上，用的是浏览器自己的渲染引擎，所以你看到的 css 阴影效果和最终页面完全一致。

最常见的用法是给卡片、弹窗、按钮做层级感。比如做一张内容卡片，想要那种轻飘飘的悬浮效果，可以把偏移设成 0 和 2px、模糊 8px、扩展 0、颜色 rgba(0,0,0,0.15)，预览里立刻能看出阴影是不是太重；按钮在 hover 时再换一组更大的偏移和模糊，就有了被抬起来的错觉。如果勾选 inset 内阴影，同样一组数值会画在盒子内部，常用来模拟输入框凹陷、开关按下的质感。调到满意后直接复制那行 css shadow 代码，粘进样式表或组件里即可。

有几个点容易踩坑。box-shadow 不参与布局，不会像 border 那样把盒子撑大，也不会挤占周围元素的空间，所以加阴影不用担心页面错位。原生 CSS 里一个元素还能用逗号分隔叠加多层阴影做出更真实的过渡，这需要把多段生成结果自己拼起来。另外它和 filter: drop-shadow 不是一回事：box-shadow 永远沿着矩形边框盒描边，而 drop-shadow 会顺着元素的不透明像素轮廓走，给不规则图形或带透明通道的 PNG 加阴影时才用后者。最后，大范围模糊叠加在很多元素上会有渲染开销，动画里频繁改动 box-shadow 也可能掉帧，量大时留意性能。

CSS阴影生成器是一个免费的在线工具，打开网页就能用，不用下载也不用注册。平时大家搜的“box-shadow生成”、“css阴影”、“阴影生成器”，说的都是这个。