CSS 阴影生成器 (box-shadow、text-shadow)

用滑块调节 box-shadow、text-shadow 和 filter: drop-shadow()，叠加多个阴影图层并生成 CSS。可用于一边查看实时预览，一边确定卡片或按钮的层次感、按下的内阴影效果或文字描边。

使用方法

1. 在“类型”中选择 box-shadow、text-shadow 或 filter: drop-shadow。
2. 在“阴影图层”的每个图层中设置“水平偏移”“垂直偏移”“模糊”“扩散”（仅 box-shadow）、“阴影颜色”和“不透明度”。打开“内阴影”可得到内部阴影。
3. 按“添加图层”或“复制图层”增加图层，并用箭头调整顺序。取消勾选某个图层会暂时将其排除。
4. 在左侧预览中设置“背景色”“卡片颜色”“圆角”和“卡片大小”，使其接近真实页面。
5. 如有需要，可在“预设”中选择一个起点，然后按 CSS 旁的“复制”。

计算方式与说明

• 一个 box-shadow 图层的写法是“[inset] x y 模糊 扩散 颜色”。扩散为正值时阴影变大，为负值时变小。text-shadow 没有扩散和内阴影。
• filter: drop-shadow() 沿可见形状（PNG 图标、SVG）生成阴影，而不是沿盒子；连写多个函数会叠加。
• 颜色不透明时写成 HEX，否则写成 rgb(r g b / a)。自然的层次感通常来自两三个低不透明度、模糊逐渐增大的图层。
• 图层和预览设置保存在此浏览器中。

常见问题

box-shadow 中各值的顺序是什么？

水平偏移、垂直偏移、模糊、扩散、颜色，内部阴影则把 inset 放在最前面。例如：box-shadow: 0 4px 12px rgb(0 0 0 / 0.15)。

如何给卡片加上自然的阴影？

叠加两三个不透明度为 10% 到 20% 的图层，并逐步增大垂直偏移和模糊。预设“中层级”和“柔和五层”就是这样构成的。

text-shadow 能做出文字描边吗？

可以。四个模糊为 0 的阴影分别放在四个方向（1px 1px、-1px -1px、1px -1px、-1px 1px）就能形成细描边。“文字描边”预设正是这样做的。

box-shadow 和 drop-shadow 滤镜有什么区别？

box-shadow 给元素的矩形盒子加阴影；drop-shadow 滤镜给可见形状加阴影。对于透明背景上的图标或 SVG，应使用 drop-shadow。