阴影生成器

📖 工具介绍

阴影生成器是一款帮助前端与 UI 设计师快速调出精致投影的在线 CSS box-shadow 可视化工具。手写 box-shadow 常常要在调试面板和代码之间反复横跳，本工具把整条属性拆开成四个直观的参数：X 偏移、Y 偏移、模糊半径与扩展距离，外加颜色与不透明度，并用一张真实卡片在棋盘格舞台上实时呈现投影效果，拖动滑块的每一像素变化都立即可见。工具支持多层阴影叠加：点击「添加阴影层」即可新增一层，每层拥有独立参数，层与层之间用逗号组合，先列出的层绘制在最上方，最多可叠 5 层，轻松做出由近及远、由浓到淡的层次感。左侧层列表带小色样预览，点击任意一层即可切换编辑目标，右侧滑块随即同步到该层。调好后，底部代码框自动拼出完整的 box-shadow 语句，一键复制或下载为 .css 文件。所有计算与渲染都在浏览器本地完成，完全离线可用。

✨ 功能特点

• 实时预览：白色卡片在棋盘格舞台上投影，调参即刻所见
• 四参数滑块：X/Y 偏移、模糊、扩展，配合数字框精确定位
• 颜色与透明度：取色器选色，不透明度独立调节，自动输出 rgba
• 多层叠加：2–5 层阴影自由组合，层列表点击切换编辑
• 标准代码：自动拼接 box-shadow 语句，附带属性名复制即用
• 示例与下载：内置柔和多层示例，代码可存为文件归档

📝 使用方式

1. 在左侧层列表点击要编辑的阴影层，被选中的层会高亮
2. 拖动右侧 X/Y 偏移、模糊、扩展滑块，观察上方卡片阴影
3. 用取色器修改阴影颜色，用不透明度滑块调浓淡
4. 需要更丰富层次时点「添加阴影层」，多余时点「删除当前层」
5. 满意后点击「复制代码」粘贴到项目，或「下载 CSS」保存

⚠️ 注意事项

• 层数限制：最少 1 层、最多 5 层，超出范围会给出提示
• 叠加顺序：先列出的阴影绘制在最上层，删除层后自动重排
• 参数范围：偏移 -50~50px、模糊 0~80px、扩展 -30~30px、不透明度 0~100%
• 颜色输出：阴影颜色自动转为 rgba() 写法，含透明度参数
• 本地运行：所有渲染与代码生成均在浏览器完成，无网络请求