# CSS 阴影生成器教程：可视化拖拽调参，一键复制 box-shadow 代码

> 来源：工具派（https://gjupai.com） 原文页面：https://gjupai.com/tutorial/css-box-shadow-generator-guide

## 工具简介

**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 |

每个数值参数都有「滑杆 + 数字输入框」两种调节方式：滑杆粗调、输入框精调，右侧预览区实时刷新。

## 使用步骤

1. **选预设起步（推荐）**：在「快速预设」区点击最接近目标效果的按钮，例如做卡片选「卡片阴影」、做悬浮按钮选「按钮悬浮」，工具会一次性载入该预设的全部阴影层。

![CSS 阴影生成器主界面：左侧为快速预设按钮组、背景色/方块色取色器、预览方块圆角滑杆、阴影层列表与 X/Y 偏移、模糊](article/202607/1783965760383_4760.png)

2. **调整预览环境**：用「背景色」「方块色」取色器模拟实际页面的配色，拖动「预览方块圆角」滑杆（0–100px）设定圆角，让预览效果贴近真实使用场景。

3. **管理阴影层**：在「阴影层」列表中点击某一层将其选中（高亮显示）；点「添加阴影」新增一层；用 ↑ ↓ 按钮调整层级顺序（列表靠上的层在 CSS 代码中靠前）；点「删除」移除不需要的层（至少保留一层）。

4. **精调当前层参数**：在「编辑阴影」区拖动 X 偏移、Y 偏移、模糊半径、扩散半径四个滑杆，右侧预览实时变化；需要内阴影时勾选「内阴影」；用取色器或文本框设置阴影颜色与透明度。

5. **复制代码**：效果满意后，在右侧「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 中靠前的阴影层绘制在上层，可能遮挡后面的层。用 ↑ ↓ 按钮把大而淡的阴影放到列表下方、小而深的放在上方，叠加效果更自然。