CSS 阴影生成器
通过偏移、模糊、扩展、颜色和 inset 控件构建多层 CSS box-shadow，并复制可直接使用的 box-shadow 属性。
正在加载工具…
CSS 阴影生成器 — 随心叠加任意多个阴影层——分别设置每层的水平和垂直偏移、模糊、扩展、颜色以及 inset 开关——实时预览随之更新，同时为你生成完整的 box-shadow CSS。一切都在浏览器本地运行，绝不上传任何数值。复制结果即可直接粘贴到样式表中。
CSS 阴影生成器 是什么？
CSS 阴影生成器是一款免费的 CSS box-shadow 属性可视化编辑器，专为前端开发者和设计师打造。添加一个或多个阴影层，用简单的数字输入框和取色器调整每层的 offset-x、offset-y、模糊半径、扩展半径、颜色以及 inset 开关。棋盘格背景上的实时预览框会即时显示叠加后的效果，并自动生成完整的 box-shadow 声明（用逗号分隔每一层）供你复制。无论是制作柔和的悬浮阴影、清晰的新拟态、发光效果，还是分层的 Material 风格立体感，都无需死记数值顺序。
如何使用 CSS 阴影生成器
- 设置第一层的 offset-x 和 offset-y（单位 px）来水平和垂直移动阴影；负值会向左或向上移动。
- 调整模糊半径（阴影的柔和程度）和扩展半径（阴影放大或缩小的距离）。
- 用色块取色或直接输入十六进制值——8 位十六进制（如 #00000040）可设置阴影的透明度。
- 勾选 inset 复选框可将阴影绘制在元素内部，而非外部。
- 点击「添加层」叠加另一层阴影，通过编辑数值进行调整；用垃圾桶按钮删除任意层。
- 查看预览更新，然后将生成的 box-shadow CSS 复制到样式表中。
示例
柔和的卡片悬浮
输入
x 0, y 4, blur 12, spread 0, 颜色 #00000040
输出
box-shadow: 0px 4px 12px 0px #00000040;
双层立体感
输入
第 1 层：0 1 2 0 #0000001a · 第 2 层：0 8 24 -4 #00000026
输出
box-shadow: 0px 1px 2px 0px #0000001a, 0px 8px 24px -4px #00000026;
Inset 内阴影
输入
勾选 inset, x 0, y 2, blur 6, spread 0, 颜色 #00000059
输出
box-shadow: inset 0px 2px 6px 0px #00000059;
常见问题
- box-shadow 各数值的顺序是怎样的？
- 每一层依次写作 offset-x、offset-y、模糊半径、扩展半径、颜色，前面可选地加上 inset 关键字。本工具始终以 px 输出全部四个长度（offset-x、offset-y、模糊、扩展），因此顺序清晰明确，事后也便于手动微调。
- 可以添加半透明或彩色阴影吗？
- 可以。在颜色字段中输入任意 CSS 颜色——完整的 8 位十六进制（如 #00000040，最后两位是透明度）即可得到半透明阴影，你也可以使用颜色名称或任意十六进制。取色器色块处理纯色 #rrggbb；若需透明度，请编辑文本字段。
- 如何叠加多层阴影？
- 为每一层额外阴影点击「添加层」。生成的 CSS 会按从上到下的顺序用逗号分隔每一层——第一层最后绘制（位于最上方）。可用于分层的 Material 风格立体感，或将外发光与内嵌高光组合在一起。
- inset 复选框有什么作用？
- inset 会将阴影绘制在元素边框内部，营造内凹或内发光效果，而非外部投影。可按层勾选；你也可以在同一个 box-shadow 值中混用 inset 阴影和外部阴影。
- 我的数据会被上传到任何地方吗？
- 不会。生成器完全在你的浏览器中通过 JavaScript 运行——你的颜色和数值绝不会发送到服务器，因此既能保护隐私，页面加载后甚至还能离线使用。