工具简介
CSS 阴影生成器是工具派「设计可视化」分类下的一款前端辅助工具：打开网页即可通过滑杆、取色器等可视化控件调整 box-shadow 的各项参数，右侧实时预览阴影效果，并自动生成可直接粘贴到项目里的 CSS 代码。它支持多层阴影叠加、8 套常用预设一键套用、内阴影（inset）、自定义阴影颜色与透明度，无需手写和反复刷新调试代码，特别适合前端开发、UI 设计和设计稿还原场景。
功能亮点
- 多层阴影叠加：可添加任意多个阴影层，每层独立设置参数，用 ↑ ↓ 按钮调整层级顺序，轻松复刻 Material Design、Tailwind 等由多层阴影组合出的细腻质感。
- 8 套预设一键套用：内置卡片阴影、按钮悬浮、柔和投影、内阴影凹陷、霓虹光晕、Material E1、Material E8、Tailwind MD 共 8 套预设，点击即可载入整套阴影层，再按需微调。
- 内阴影外阴影都支持：勾选「内阴影」即可生成
inset内阴影，做凹陷、压感、输入框内嵌效果。 - 完整代码输出：自动生成包含
background-color、border-radius、box-shadow的.box样式，支持「复制 CSS」或「复制 HTML+CSS」（含<div class="box"></div>结构），拿来即用。
参数说明
每个阴影层的四个数值参数与 CSS box-shadow: X偏移 Y偏移 模糊半径 扩散半径 颜色 一一对应：
| 参数 | 作用 | 取值范围 / 默认值 |
|---|---|---|
| X 偏移 | 阴影水平方向位移，正值向右、负值向左 | -100 ~ 100px，默认 0 |
| Y 偏移 | 阴影垂直方向位移，正值向下、负值向上 | -100 ~ 100px，默认 4 |
| 模糊半径 | 阴影的虚化程度，越大越柔和 | 0 ~ 100px，默认 6 |
| 扩散半径 | 阴影的缩放，正值放大、负值收缩 | -50 ~ 50px，默认 -1 |
| 颜色 | 阴影颜色。取色器选取后自动转为 rgba(...,0.3)；也可在文本框直接粘贴任意 CSS 颜色（含透明度） | 默认 rgba(0,0,0,0.1) |
| 内阴影 | 勾选后该层变为 inset 内阴影 | 默认不勾选 |
| 背景色 / 方块色 | 仅影响预览区的底色与方块颜色，方便在不同背景下观察效果；方块色会写入生成的 CSS | 默认 #f3f4f6 / #ffffff |
| 预览方块圆角 | 预览方块的 border-radius，同时写入生成的 CSS | 0 ~ 100px，默认 12 |
每个数值参数都有「滑杆 + 数字输入框」两种调节方式：滑杆粗调、输入框精调，右侧预览区实时刷新。
使用步骤
- 选预设起步（推荐）：在「快速预设」区点击最接近目标效果的按钮，例如做卡片选「卡片阴影」、做悬浮按钮选「按钮悬浮」，工具会一次性载入该预设的全部阴影层。
调整预览环境：用「背景色」「方块色」取色器模拟实际页面的配色，拖动「预览方块圆角」滑杆（0–100px）设定圆角，让预览效果贴近真实使用场景。
管理阴影层：在「阴影层」列表中点击某一层将其选中（高亮显示）；点「添加阴影」新增一层；用 ↑ ↓ 按钮调整层级顺序（列表靠上的层在 CSS 代码中靠前）；点「删除」移除不需要的层（至少保留一层）。
精调当前层参数：在「编辑阴影」区拖动 X 偏移、Y 偏移、模糊半径、扩散半径四个滑杆，右侧预览实时变化；需要内阴影时勾选「内阴影」；用取色器或文本框设置阴影颜色与透明度。
复制代码：效果满意后，在右侧「CSS 代码」区点「复制 CSS」只复制样式，或点「复制 HTML+CSS」连结构一起复制，粘贴到你的项目即可。
使用技巧
- 多层比单层更自然：真实世界的投影通常由「近处深而小的阴影 + 远处浅而大的阴影」叠加而成。先用预设载入两层结构，再分别微调，比单层硬拉参数更容易做出高级感。
- 扩散半径试试负值：负的扩散（如 -1px、-3px）能让阴影边缘更锐利、更贴合元素，是 Material / Tailwind 风格的常用手法。
- 颜色务必带透明度：阴影建议用 rgba 并把透明度控制在 0.05–0.3 之间，纯黑不透明阴影会显得生硬脏污。
- 彩色光晕效果：把阴影颜色换成主题色（如蓝色 rgba(59,130,246,0.5)）、偏移设为 0、加大模糊与扩散，就是霓虹光晕效果；可直接套用「霓虹光晕」预设再改色。
- 深色主题先换背景色：做深色页面时先把「背景色」换成深色再调阴影——浅色背景下好看的参数，在深色背景下可能完全看不见。
常见问题
Q1：生成的代码可以直接用吗？
可以。生成的 .box 样式包含 background-color、border-radius、box-shadow 三条声明，把选择器改成你自己的类名即可直接使用。
Q2：box-shadow 各数值的顺序是什么？
工具生成的格式为 X偏移 Y偏移 模糊半径 扩散半径 颜色，内阴影在最前面加 inset，多层之间用逗号分隔，与 CSS 标准语法完全一致。
Q3：为什么取色器选完颜色变成半透明了？
取色器选取的颜色会自动转为 rgba 并附加 0.3 的透明度，避免阴影过重。如需其他透明度，直接在颜色文本框里修改 rgba 的最后一个数值即可。
Q4：阴影层的顺序对效果有影响吗？
有。CSS 中靠前的阴影层绘制在上层，可能遮挡后面的层。用 ↑ ↓ 按钮把大而淡的阴影放到列表下方、小而深的放在上方，叠加效果更自然。