按钮悬停态统一
设计师交付了三个按钮的 hover 效果：主按钮用两层外发光，次按钮用内阴影，图标按钮用下拉投影。前端在代码里分别写三个不同 mixin，每次改色值要调三个地方。用本工具将三个效果存为同一份 CSS 代码的不同变量，调整色值后所有按钮同步更新。inset 与多层投影在同一面板内完成，省去切换不同生成器的麻烦。
图 层Shadow Layers · 拖动重排 · 点标题展开
元 素Preview Box
底色 fill
圆角 radius
12px
尺寸 size
150px
预 设Gallery · Material / 拟真 / 霓虹
拖 动
box-shadow
拖动元素 → 当前层 X/Y就绪 · 多层投影实时合成 · 全程浏览器本地处理
第一节
关于本工具
About在 Figma 或 CSS 里调投影，常遇到两个麻烦：内阴影（inset）该勾还是该写代码，多层阴影的叠加顺序怎么排。这个工具把 inset 开关、模糊半径、扩展半径和颜色都做成滑块，调完直接复制 CSS 代码。所有渲染都在浏览器内完成，不会把设计稿上传到任何服务器。
使用场景
卡片层级区分
一个后台仪表盘页面有六种卡片：数据总览、图表、列表、告警、操作面板、日志。视觉上需要让用户一眼看出哪些卡片可交互、哪些只是信息展示。用本工具给可交互卡片加两层投影——外层 8px 扩散、内层 2px 紧贴——不可交互卡片只用单层。实时预览下拖动滑块微调，直到两层投影的叠加效果在白色背景上刚好区分出层级。
夜间模式适配
产品有深色主题，但 box-shadow 在深色背景上表现完全不同——同样的 0.3 透明度在黑色底上几乎看不见。用本工具在深色底上重新调整投影的色值、模糊半径和扩展半径。inset 内阴影在深色底上模拟凹陷效果时，需要把阴影色从纯黑改为更深的品牌色。实时预览让设计师在两种主题间反复切换对比，直到两种模式下按钮立体感一致。
弹窗遮罩层次
弹窗需要三层阴影：最外层是半透明遮罩（覆盖整个页面），中间层是弹窗边框的投影（让弹窗浮在遮罩之上），最内层是关闭按钮的 inset 阴影（模拟凹陷点击感）。用本工具三层叠加功能分别设置每层的模糊和颜色，遮罩层用 0 模糊、大扩散半径，弹窗边框投影用 4px 模糊、小扩散。实时预览下调整遮罩透明度，确保弹窗内容仍清晰可读。
组件库规范落地
团队在 Figma 里定义了一套阴影 token：sm/md/lg/xl 四个等级，每个等级有精确的 x、y、模糊、扩散和色值。前端需要将这些 token 翻译成 CSS。用本工具逐个输入 token 的数值，实时预览验证效果是否与设计稿一致。发现 lg 级阴影在真实浏览器里比 Figma 预览更重，把模糊半径从 12px 调整到 10px，扩散从 0 改为 2px。最终将四组数值直接复制到组件库的 less 变量文件中。
第二节
使用指南
Getting Started使用步骤
- 1在「投影层」区域点击「+ 添加层」增加一个阴影层，右侧预览区即时显示默认投影效果
- 2调整该层的 X/Y 偏移量（px）、模糊半径、扩展半径，每拖动滑块或键入数值，预览同步更新
- 3勾选「Inset」开关将当前层切换为内阴影，预览区自动重绘为向内凹陷效果
- 4点击层色块打开取色器，选色后阴影颜色立即生效，支持透明度（Alpha）调节
- 5如需多层叠加，重复添加层并分别调整参数，各层按列表顺序叠加渲染，预览区实时反映组合结果
输入输出示例
| 输入 | 输出 | 说明 |
|---|---|---|
| 0px 0px 5px rgba(0,0,0,0.5) | box-shadow: 0px 0px 5px rgba(0,0,0,0.5); | 常规：最简单的单层模糊投影，验证基础阴影生成 |
| 2px 2px 0px 0px #000000 | box-shadow: 2px 2px 0px 0px #000000; | 常规：无模糊的实心偏移阴影（spread=0），常见于边框替代效果 |
| inset 0px 0px 10px 5px #ff0000 | box-shadow: inset 0px 0px 10px 5px #ff0000; | 边界：inset 内阴影 + spread 正值，验证内阴影与扩展半径的叠加效果 |
| 0px 0px 0px 0px rgba(0,0,0,0) | box-shadow: 0px 0px 0px 0px rgba(0,0,0,0); | 边界：全零参数 + 透明色，理论上不产生任何阴影，验证工具是否输出合法 CSS |
| 10px 10px 20px 30px #000, -5px -5px 10px #fff | box-shadow: 10px 10px 20px 30px #000, -5px -5px 10px #fff; | 边界：多层投影（逗号分隔），验证工具是否支持多组阴影同时生成 |
| 100px 100px 200px 300px #123456 | box-shadow: 100px 100px 200px 300px #123456; | 易错：超大偏移和模糊值，测试工具对极端值的处理（是否截断或报错） |
| inset 0px 0px 0px 10px #00ff00 | box-shadow: inset 0px 0px 0px 10px #00ff00; | 易错：inset + spread 正值但 blur=0，常见于制作内边框效果，易与 outline 混淆 |
常见错误对照
1.忘记加 inset 关键字，内阴影变成外阴影
✗ 错误
box-shadow: 0 0 10px rgba(0,0,0,0.5);✓ 修复
box-shadow: inset 0 0 10px rgba(0,0,0,0.5);inset 必须写在偏移量之前，否则浏览器会忽略该关键字，内阴影效果无法生效。
2.多层投影用逗号分隔，但忘记写最后一个分号
✗ 错误
box-shadow: 2px 2px 5px #000, -2px -2px 5px #ccc✓ 修复
box-shadow: 2px 2px 5px #000, -2px -2px 5px #ccc;CSS 声明末尾必须加分号，否则后续属性会被错误解析为阴影的一部分，导致整条规则失效。
3.颜色值用了无效的 rgba 格式
✗ 错误
box-shadow: 0 0 10px rgba(255, 0, 0, 0.5, 0);✓ 修复
box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);rgba() 只接受 4 个参数（红、绿、蓝、透明度），多传参数会导致整个颜色值被浏览器忽略。
4.阴影模糊半径设为 0，但期望有柔边效果
✗ 错误
box-shadow: 5px 5px 0px #000;✓ 修复
box-shadow: 5px 5px 10px #000;模糊半径（第三个值）为 0 时阴影边缘完全锐利，与硬边描边无异，不会产生任何模糊扩散效果。
5.阴影扩展半径与模糊半径写反顺序
✗ 错误
box-shadow: 5px 5px 10px 2px #000;✓ 修复
box-shadow: 5px 5px 2px 10px #000;box-shadow 参数顺序固定：水平偏移、垂直偏移、模糊半径、扩展半径、颜色。模糊半径必须紧跟在偏移之后，扩展半径在第四位。
6.使用十六进制颜色时漏掉 # 号
✗ 错误
box-shadow: 0 0 5px ff0000;✓ 修复
box-shadow: 0 0 5px #ff0000;CSS 颜色值中十六进制必须带 # 前缀，否则浏览器会将其当作无效颜色值，阴影不会显示。
7.多层投影之间用空格分隔而非逗号
✗ 错误
box-shadow: 2px 2px #000 4px 4px #ccc;✓ 修复
box-shadow: 2px 2px #000, 4px 4px #ccc;CSS 规范要求多层阴影用逗号分隔，空格分隔会被解析为同一阴影的多个参数，导致语法错误。
8.同时使用 inset 和扩展半径时顺序错误
✗ 错误
box-shadow: 0 0 10px 5px inset #000;✓ 修复
box-shadow: inset 0 0 10px 5px #000;inset 必须位于最前，然后才是偏移和半径值；放在颜色之后会被浏览器忽略，内阴影效果不生效。
第三节
工作原理
How It Works核心公式
box-shadow: offset-x offset-y blur-radius spread-radius color inset
变量说明
offset-x水平偏移，正右负左，单位 pxoffset-y垂直偏移，正下负上，单位 pxblur-radius模糊半径，值越大边缘越模糊spread-radius扩展半径，正扩大负缩小阴影面积color阴影颜色，支持 hex/rgba/hslainset可选关键字，将阴影转为内阴影
示例
为 300×200 px 的矩形添加外阴影：offset-x=4, offset-y=6, blur=10, spread=2, color=rgba(0,0,0,0.5)。渲染时阴影矩形尺寸为 (300+2×2)×(200+2×2)=304×204 px，再以该矩形为基准应用 10 px 高斯模糊，最终阴影向右下偏移 4×6 px。
用户输入
本地处理
输出结果
第五节
常见问题
Q & A问怎么加多层的投影，我试了只能加一层？＋
答
本工具支持多层投影。在输入框里用逗号分隔每一层的参数，例如：`10px 10px 5px #000, 20px 20px 10px #666`。工具会自动解析并叠加显示。每层都可以单独控制偏移、模糊、扩散和颜色，实时预览区会同步更新所有层的效果。如果只看到一层，检查一下是不是忘记加逗号了。
问Inset 投影为什么预览里看不出来效果？＋
答
Inset 是内阴影，需要元素本身有背景色或边框才能明显看到。如果元素背景是透明的，内阴影会直接透过去，看起来像没效果。建议先给元素设置一个背景色（比如 `#f0f0f0`），再调整 Inset 的偏移和模糊值，效果就会清晰可见。工具默认的预览元素有浅灰色背景，如果改成了透明就会这样。
问生成的 CSS 代码可以直接复制用吗，要不要改什么东西？＋
答
复制出来的 CSS 是标准 `box-shadow` 属性，直接粘贴到样式表里就行。唯一可能需要调整的是浏览器兼容性：现代浏览器都支持 `box-shadow`，但如果要兼容非常老的浏览器（比如 IE 9 以下），可能需要加 `-webkit-` 前缀。不过本工具输出的代码没带前缀，适合现代项目。
问我把偏移值设成负数了，投影怎么跑到元素外面去了？＋
答
这是正常行为。`box-shadow` 的偏移值支持负数：`-10px 0` 会让阴影向左偏移，`0 -10px` 会向上偏移。阴影本身可以超出元素边界，不会被裁剪。如果不想让阴影超出，可以给父元素加 `overflow: hidden`，但这样也会裁剪掉其他溢出的内容。
问为什么我调了模糊值，但阴影边缘还是特别生硬？＋
答
模糊值（blur-radius）控制的是阴影边缘的渐变过渡。如果设为 0，阴影就是完全清晰的硬边。要更柔和的边缘，需要把模糊值设大（比如 20px 以上），同时配合扩散值（spread-radius）调整阴影大小。另外，颜色透明度也会影响柔和感：用 `rgba(0,0,0,0.3)` 比纯色 `#000` 更自然。
问这个工具要联网才能用吗，我网络不好会不会卡？＋
答
完全不需要联网。本工具是纯前端实现（FE），所有计算和渲染都在浏览器本地完成，不会上传任何数据到服务器。就算断网也能正常使用。实时预览的卡顿只取决于电脑性能，如果预览很卡，可以试着减少投影层数或降低模糊值，因为每层都需要浏览器实时重绘。
问跟 Photoshop 的图层样式比，这个生成器准不准？＋
答
两者原理一样，都是模拟光线投影，但细节有差异：PS 的投影可以单独控制角度、距离、大小等参数，更灵活；而本工具直接输出 CSS `box-shadow`，参数更接近 CSS 标准。如果你在 PS 里调好了投影，想转成 CSS 用，可以手动把 PS 的「角度+距离」换算成 X/Y 偏移，把「大小」换算成扩散值。本工具适合快速生成 CSS 代码，不适合做复杂光影合成。
问我把颜色设为透明了，预览里看不到投影怎么办？＋
答
`box-shadow` 的颜色如果设为 `transparent` 或透明度为 0（如 `rgba(0,0,0,0)`），阴影就是完全透明的，自然看不到。要看到投影，颜色必须有不透明度。建议用 `rgba(0,0,0,0.5)` 这类半透明颜色，或者直接选一个带透明度的色值。工具的颜色选择器支持调整透明度。
隐私保证所有计算与处理均在你的浏览器本地完成，输入数据不会上传服务器，也不会保存或共享。