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


## 工具简介

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


免费在线 CSS 阴影生成器：可视化滑杆调整 box-shadow 的偏移、模糊、扩散、颜色与内阴影，支持多层叠加与卡片阴影、霓虹光晕、Material、Tailwind 等 8 套预设，实时预览，一键复制 CSS 代码。

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