使用方法
CSS长方体阴影生成器的输出只有一条 box-shadow 声明，但四个长度值与颜色各有明确语义，按下面的步骤填：
- 填四个长度值：offset-x（示例 6px，正数向右偏）、offset-y（示例 8px，正数向下偏）、blur（示例 18px）、spread（示例 0px）。
- 用颜色选择器挑阴影色（示例 #1f2937），再用 alpha 滑出透明度（示例 0.18）；需要内凹就勾 inset。
- 点「生成阴影」或在任意输入框按 Enter，预览框与声明同步更新，声明下方附等价的八位十六进制色值。
- 「复制 CSS」把声明复制到剪贴板，直接粘进样式表。
- 「载入四层示例」演示多阴影逗号层叠的写法；下方 18 行预设表可用「导出预设表 CSV」整表带走。
这个CSS长方体阴影生成器能解决什么
box-shadow 语法短、坑多：值都能省略，省略后含义悄悄改变。本页把每个值都做成显式控件，输出永远是完整的四值语法加颜色，杜绝「少写一个 0px 导致 spread 被当成了 color」这类手写错误。
第二类问题是阴影看起来不对劲却说不清为什么。常见原因是 blur 与 spread 的关系没对齐：blur 18px 的可见外扩半径其实是 18/2 + spread = 9px，而不是 18px。统计条实时显示这个中间量，调参时心里有数。
第三类是透明色写法不统一：设计稿给的是 rgba，项目里却统一用八位 hex。本页对任意 alpha 都换算出等价的 #RRGGBBAA，并说明换算的四舍五入口径（alpha×255 取整）。
本页不做的事：不生成 text-shadow（按字形轮廓渲染，参数语义不同）；不调 filter: drop-shadow（无 spread 参数，差异见原理一节）；不做带角度的太阳光投影模拟——box-shadow 没有「角度」参数，方向全靠 offset 的正负表达。
原理与规则说明
语法遵循 CSS Backgrounds and Borders Module Level 3：box-shadow: offset-x offset-y blur spread color，inset 关键字可写在最前。前两个值必填，后三个可省略；颜色省略时用 currentColor——这正是手写时最意外的隐式行为，本页输出永远显式带色。
blur 的语义不是「模糊半径到边」，规范把它定义为高斯模糊标准差的 2 倍：blur 18px 即 σ=9px，所以可见外扩半径是 blur/2 + spread。spread 则直接给阴影「实体」加宽或收窄：负 spread 收缩阴影，spread = −blur/2 时可见外扩恰好归零，只剩弥散；贴底收敛预设（0 10px 20px −8px）就是用 −8 抵掉 20/2=10 的扩散再收 3px，让阴影贴着盒子下缘。
负值边界：spread 允许负；blur 不允许负，规范要求按 0 处理，本页输入负 blur 时按 0 参与计算并在统计条标注，而不是静默吞掉。多层阴影用逗号分隔，先声明的在上层：上层不透明时会完全盖住下层，半透明时下层透出叠加。
颜色换算：rgba(r,g,b,a) 与 #RRGGBBAA 等价（CSS Color 4），alpha 先乘 255 再四舍五入，量化步长 1/255 ≈ 0.392%，共 256 档。示例 alpha 0.18 → 0.18×255 = 45.9 → 46 → 十六进制 2E，得 #1F29372E；顺带说明 0.18 与 0.179 落在同一档，八位 hex 本身就有量化损失。
与 filter: drop-shadow() 的分工：box-shadow 按边框盒矩形渲染，元素背景透明也照样是一整块矩形阴影；drop-shadow 按alpha 轮廓渲染，圆形元素得圆形阴影、PNG 贴纸得贴纸形阴影，但它只有 offset-x offset-y blur color 四个值，没有 spread——需要负 spread 收缩的内阴影效果只能用 inset 的 box-shadow 表达。
完整示例（数值仅作演示）
CSS长方体阴影生成器的默认单层示例：6px 8px 18px 0px rgba(31,41,55,0.18)。拆开读：向右偏 6px、向下偏 8px（光源在左上）；blur 18 → σ=9，可见外扩 9+0=9px；颜色 #1f2937 即 rgb(31,41,55)，alpha 0.18 对应八位 hex #1F29372E。这组数与控件默认值、输出区、预览框三处一致。
四层示例（预览可直接载入）：0 1px 2px 0 rgba(23,32,51,0.08)、0 4px 8px −2px rgba(23,32,51,0.1)、0 12px 28px −6px rgba(23,32,51,0.16)、0 24px 56px −12px rgba(23,32,51,0.2)。四层的可见外扩半径分别是 1px、2px、8px、16px，由近到远逐层铺开、alpha 逐层加深——这是「柔和堆叠」的标准写法，比单层大 blur 更接近真实光照。
对照示例：同一元素把 box-shadow 换成 filter: drop-shadow(0 12px 28px rgba(23,32,51,0.2))，矩形盒子上两者几乎一致；但如果盒子是圆形（border-radius 50%），box-shadow 仍是按矩形盒的圆角矩形算（跟随圆角），而 drop-shadow 没差别；真正的分野在透明内容——贴图元素上 box-shadow 框住整个矩形，drop-shadow 只描 alpha 轮廓。
输入范围与对照表
| 字段 | 允许范围 | 步进 | 默认 | 边界含义 |
|---|---|---|---|---|
| offset-x / offset-y | −400~400 px | 1 | 6 / 8 | 超出视口级的偏移没有设计意义 |
| blur | −100~400 px | 1 | 18 | 负值按规范以 0 参与计算并提示 |
| spread | −200~400 px | 1 | 0 | 负值收缩；−blur/2 时可见外扩归零 |
| alpha | 0~1 | 0.01 | 0.18 | 0 完全透明仍占位；量化 256 档 |
预设对照表 18 行在工具区，每行给出名称与完整声明，rgba 写法附等价八位 hex；硬投影与厚重长投影两行是纯 hex（不透明，无 alpha 通道）。
输入范围、边界与精度说明
输出精度约定：长度按输入原值输出（整数 px），不引入小数；alpha 换算八位 hex 时按 alpha×255 四舍五入，这一步不可逆——反查时 #2E 只能还原出 0.18 附近的一个区间，不要拿八位 hex 反推「精确」透明度。
层叠顺序边界：多阴影先声明的在上层。想让「远层」透出来，必须把不透明的近层写在后面或控制 alpha；同位置同 alpha 的两层叠加不会变两倍深（下层被上层覆盖渲染，非乘法混合）。
性能边界：阴影层数控制 在 1~6 层。每层都要独立做一次高斯模糊与合成，层数与面积是渲染开销的两个乘数；低端机上大面积多层阴影滚动时会掉帧。blur=0 是硬边（无过渡），1px 起才有可见羽化；0.5px 允许但等于半像素羽化，不同设备渲染差异明显。
常见误用的正确解释：一，阴影没出现——多半 alpha 是 0 或颜色与背景同色，本页会照常输出声明并在统计条提示 alpha 0 不可见；二，inset 阴影「位置反了」——inset 的 offset 正负号语义与外阴影一致，但阴影画在内侧，视觉方向感受相反；三，负 blur 被某些工具静默清零，本页显式标注。层数、偏移超出范围的输入会得到具体到字段与上下限的报错。
常见问题
为什么 blur 18px 的阴影看起来只有 9px？
规范定义 blur 是高斯标准差的 2 倍，可见外扩半径 = blur/2 + spread = 9 + 0 = 9px。要更宽的柔影，把 blur 翻倍或加正 spread。
inset 能和普通阴影同时用吗？
可以。inset 是每层自己的属性，逗号列表里有的层写 inset、有的不写即可，例如「inset 0 1px 0 0 rgba(255,255,255,0.6), 0 2px 8px 0 rgba(23,32,51,0.15)」一内一外。
多层阴影谁在上谁在下？
先声明的在上层。上层不透明时下层完全不可见；半透明时下层从上层透出。调试时可先把各层 alpha 临时设为 1 观察顺序。
八位 hex 老浏览器不认怎么办？
#RRGGBBAA 是 CSS Color 4 写法，IE 与旧版 Edge 不支持。用本页主输出的 rgba() 写法兼容性最好，八位 hex 仅作等价参考。
阴影会影响布局或点击区域吗？
不会。box-shadow 不占布局空间、不参与命中测试，点击穿透到阴影下方的元素；需要「占位的外扩」请用 border 或 outline。
为什么我的阴影盖住了相邻元素？
阴影属于元素本身的绘制层，后绘制的元素若在前面元素的层级之上，阴影会随宿主被压在下层；用 z-index 调整宿主层级即可，阴影无法单独调层级。
alpha 0.18 换算成 hex 为什么是 2E？
0.18×255 = 45.9，四舍五入 46，十六进制 2E。整条链路是「alpha → 0~255 整数 → 两位十六进制」，量化步长 1/255，约 0.392%。
调参时预览不更新？
检查 alpha 与长度字段是否为空或超出 min/max：非法输入会给出指出字段与范围的红色提示而不是静默归零；修正后点「生成阴影」即可。
相关工具
- CSS圆角生成器：与阴影同框出场最多的搭档，border-radius 四角独立控制。
- CSS Flexbox布局生成器：先排版再加阴影，布局层与装饰层分开调。
- CSS网格生成器：grid 模板行列的可视化生成。
- 颜色选择器：为阴影挑选主色，HSL/RGB/HEX 三写法联动。
- 十六进制颜色表：常用色的 hex 速查，含本页品牌色 #315FE8。
- Transparent颜色计算器：alpha 通道的深度换算，与本页八位 hex 输出互补。
- 渐变色生成器：background 的渐变写法，与 box-shadow 无关但同属装饰层。
全部生成器见分类页。