CSS 盒阴影生成器

CSS Box Shadow 生成器让你可视化地构建 box-shadow 值，而不是手写。你可以堆叠任意数量的阴影图层，用滑块或精确数字微调每一层，在实时预览方块上查看效果，然后复制可直接用于生产的声明。阴影是给卡片、按钮或模态框增加层次感最快的方法之一，所以把偏移和不透明度调对，比颜色更重要。本工具把几何参数、颜色和图层顺序集中在一处。

逐层构建阴影

1. 从默认图层开始并调整其几何参数。每个新图层初始都是 0px 4px 6px 0px rgba(0, 0, 0, 0.15)。
2. 设置偏移。 拖动滑块或在数字框中输入水平偏移、垂直偏移、模糊和扩展的值。滑块与数字输入保持同步。
3. 选择颜色和不透明度。 先挑选阴影颜色，再用不透明度滑块把透明度从颜色中分离出来，这样你就能保持相同色相、只改变透明度。
4. 切换 inset，当某图层需要内阴影而不是外投影时。
5. 添加或复制图层来构建真实的多层阴影，并删除不需要的图层。
6. 复制 CSS。 输出面板显示成品 box-shadow: ...; 声明。预览背景色只是预览辅助，不属于输出的一部分。

偏移、模糊、扩展：各自的作用

控件	范围	效果
水平偏移	-50 到 50	以像素为单位向左（负）或向右（正）移动阴影。
垂直偏移	-50 到 50	向上（负）或向下（正）移动阴影。正值读起来像光从上方来。
模糊	0 到 100	柔化边缘；0 产生硬边副本，值越大羽化越明显。
扩展	-50 到 50	在模糊前把阴影向外扩大（正）或向内收缩（负）。
不透明度	0 到 1	设置 alpha 通道；低于 1 时颜色输出为 rgba。
inset	开/关	在边框盒内部而非外部绘制阴影。

模糊为 0、扩展为 0 的阴影，就是元素盒子的一个实心偏移副本。模糊柔化其边缘，扩展则改变被模糊的形状大小。

实操示例：Material 风格海拔

经典的低海拔外观由两个图层组成，都带有小的向下偏移和紧凑的模糊：

box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.12), 0px 1px 2px 0px rgba(0, 0, 0, 0.24);

第一层是较宽的环境阴影，第二层是更锐利的接触阴影。对于浮动面板，把偏移和模糊推得更远：

box-shadow: 0px 10px 25px 0px rgba(0, 0, 0, 0.15);

柔和的新拟物表面使用两个垂直偏移相反的内阴影图层，一深一浅，让元素看起来像是压进页面：

box-shadow: inset 0px 2px 4px 0px rgba(0, 0, 0, 0.2), inset 0px -2px 4px 0px rgba(255, 255, 255, 0.6);

内阴影

内阴影绘制在元素的边框盒内部，位于边框之下、背景之上，让表面看起来凹陷。常见用途有按下状态的按钮、带内唇的文本输入框和新拟物卡片。由于阴影被裁剪到元素内，大模糊配小扩展会在内部边缘周围产生柔和的暗角，而零模糊则给出硬朗的内线。内阴影和投影一样遵循 border-radius，所以圆角输入框能保持其弧度。

准确性说明

• Hex 输入会被规范化。 像 #abc 这样的三位简写会扩展为 #aabbcc，无法解析的值回退为 #000000。
• 不透明度为 1 时切换为 hex。 满不透明度时输出 hex 颜色；低于 1 时输出四舍五入到两位小数的 rgba(...)。
• 所有长度都是像素。 生成器不输出百分比、em 或 rem。
• 不加厂商前缀。 现代浏览器不需要 -webkit-box-shadow，所以输出只有标准属性。
• 预览是固定尺寸的白色方块。 它无法展示阴影与真实元素背景或边框的交互，请把声明粘贴到实际布局中判断。

常见错误

• 把不透明度开到接近 1。 高 alpha 的阴影看起来像硬邦邦的矩形；真实的层次感通常位于 0.1 到 0.3 之间。
• 混淆模糊与扩展。 模糊柔化边缘，扩展改变大小。你想要”更大”却去加大模糊，只会得到模糊的阴影而不是更大的阴影。
• 忘记祖先元素裁剪。 带有 overflow: hidden 的父元素会裁掉超出其盒子的阴影。
• 期待行内元素上的阴影正常表现。 非替换的行内元素会跨行碎片化，想让阴影正常，请给元素设置 display: inline-block 或 block。
• 堆叠许多沉重、模糊的图层。 每次大范围模糊的重绘代价都很高，可能拖慢低端设备上的滚动性能。

相关工具

• CSS 文字阴影生成器 — 为文字构建配套的阴影。
• 颜色选择器 — 查找并转换理想的阴影颜色。
• CSS 渐变生成器 — 为阴影搭配自定义 CSS 渐变。
• 颜色对比度检查器 — 验证文字在所选背景上的可读性。