CSS 阴影生成器
本地运行，数据不上传服务器
使用说明
做后台管理系统时，卡片、表格、弹窗如果没有阴影会显得扁平，但手写 box-shadow 参数、刷新页面看效果、不满意再改，来回几次很浪费时间。设计稿标注了阴影效果却没给 CSS 代码，要自己反推偏移和模糊值。想参考竞品网站的卡片阴影，打开开发者工具看参数又不方便。 这个工具用滑块和颜色选择器实时生成单层 box-shadow。调整水平偏移、垂直偏移、模糊半径、扩散半径、颜色和透明度，预览区即时更新，所见即所得。 颜色选择器选的是 HEX 值，透明度单独调节，工具会自动合成 rgba 格式。调好后输出完整的 box-shadow 声明，带属性名和分号，直接粘贴到 CSS 文件里就能用。内置悬浮、内阴影等常用预设。
核心功能
- ✓滑块实时调整水平偏移、垂直偏移、模糊半径、扩散半径
- ✓颜色选择器 + 透明度调节，自动合成 rgba 值
- ✓实时预览阴影效果，调完即见
- ✓支持 inset 内阴影，用于输入框、凹陷卡片
- ✓输出完整 CSS 声明，带属性名和分号
- ✓提供悬浮、内阴影等常用预设
- ✓适合卡片、弹窗、按钮、导航栏和悬浮层设计
使用教程
给卡片加自然阴影：先选一个预设，再微调模糊半径和扩散半径。模糊值大、扩散值小会显得柔和，适合内容卡片；模糊小、偏移大则更有悬浮感。 做按钮 hover 悬浮效果：默认状态给一个较小的阴影，hover 时增加偏移和模糊，做出按钮“浮起来”的感觉。 做输入框内阴影：打开内阴影开关，用较小的偏移和模糊，配合深色透明度，做出输入框凹陷的立体感。 把设计稿的阴影参数转成 CSS：设计工具里通常给的是 X/Y 偏移、模糊、扩散和颜色。在工具里填入相同数值，颜色选 HEX 再调透明度，直接复制生成的 rgba 阴影代码。 复刻参考网站的阴影效果：观察目标阴影的柔和程度和方向，大致对应到模糊和偏移值，再微调到接近。
常见问题
Q：CSS 阴影生成器支持多重阴影吗？
A：当前只生成单层 box-shadow。多重阴影、发光动画和 filter: drop-shadow() 需要手动编写。
Q：怎么做出内阴影效果？
A：打开 inset 开关，阴影会从元素内部投射，适合输入框、凹陷卡片等场景。
Q：颜色透明度怎么处理？
A：选择 HEX 颜色后单独调整透明度滑块，工具会自动把 HEX 和透明度合成为 rgba() 值。
Q：复制出来的代码可以直接用吗？
A：可以。输出是完整的 box-shadow 声明，包含属性名和末尾分号。
Q：滑块范围不够用怎么办？
A：页面滑块有固定范围，如果设计稿参数超出范围，可以复制代码后手动修改数值。
Q：需要把项目代码上传吗？
A：不需要。所有调整和预览都在浏览器本地完成。