Box Shadow 生成器
拖滑条调阴影参数实时预览，一键复制 box-shadow 语句
Box Shadow 生成器是做什么的
写卡片、弹窗样式时最难凭空猜的就是阴影：偏移多少、模糊多大、颜色多深，全靠脑补，改一次刷新一次。这里把五个参数全做成滑条，拖动的同时右边大方块实时变化，调到满意为止，下面就是拼好的完整 box-shadow 语句，一键复制贴进 CSS 就能用。
颜色用取色器选，不透明度单独一根滑条，勾选内阴影还能做输入框凹陷效果。自己调不顺手也没关系，底部备了六组精选预设：卡片悬浮、弹出层、霓虹光晕、贴纸描边等等，点一下直接套用，再在上面微调就是自己的风格。全程浏览器本地运算，不需要联网。
核心功能
- X/Y/模糊/扩散四滑条实时预览
- 颜色与不透明度独立调节
- 勾选切换 inset 内阴影
- 完整 box-shadow 语句一键复制
- 六组精选预设：悬浮/弹出层/霓虹等
Box Shadow 生成器怎么用
拖滑条调阴影参数实时预览，一键复制 box-shadow 语句
- 拖动偏移、模糊、扩散滑条
- 选阴影颜色和不透明度
- 需要凹陷效果勾选内阴影
- 预览满意后一键复制语句
适合这些场景
- 网页卡片悬浮投影
- 弹窗与抽屉层投影
- 输入框内凹效果
常见问题
复制出去为什么带 box-shadow: 前缀？
输出的是完整可用的 CSS 声明，直接粘贴到任意元素的样式里即可；如果你的样式表里已经有属性名，只复制冒号后面的值部分也没问题。
扩散是负数有什么用？
负扩散会让阴影比元素本体小一圈，配合模糊做出来的悬浮感更收敛、更接近原生设计规范里的卡片投影，很多 UI 库的阴影参数就是负扩散。
多个阴影能叠加吗？
工具单次生成一条阴影，但 box-shadow 本身支持逗号叠加：先用工具调好每一条，再手动用逗号拼在一起即可；霓虹预设就是三层光晕叠加的示范。