CSS 阴影生成器
调偏移、模糊、扩散和透明度，实时看到投影效果，复制可直接使用的 box-shadow。内外阴影一键切换。
CSS 代码
使用指南
- 先定方向
外阴影用于卡片浮起，内阴影用于输入框凹陷。先把「方向」选对，再调数值，能少走很多弯路。
- 从柔和开始调
常见做法是 Y 取 2–8px、模糊取 Y 的 2–3 倍、扩散保持 0。得到一个自然的层级感后，再按需要加大或收紧。
- 复制代码
点「复制 CSS」拿走整行 box-shadow，粘到规则块里即可；数值随时可回来继续微调。
常见问题
模糊和扩散有什么区别？
模糊是把边缘做出柔化过渡，值越大越虚；扩散是把阴影整体向外（或向内）撑大或收小，不改变边缘的锐利程度。所以扩散为负值可以让阴影比元素还小。
为什么输出里 0 不带 px？
CSS 里 0 是唯一可以不写单位的长度值，写 0px 虽然合法但多余。工具统一把 0 输出成 0，代码更干净。
透明度为什么用百分比？
因为 rgba 的第四个参数是 0–1 的小数，直接用百分比输入更符合直觉。填 12 就输出 0.12。
多层阴影怎么做？
本工具一次生成一层。需要多层时把多层的结果用逗号拼在同一个 box-shadow 里，例如先复制一层外阴影再手动加一层内阴影。