Box Shadow 生成器
最多叠加 6 层阴影，每层独立调节，一键复制干净的 CSS 或 Tailwind 代码。
阴影图层 (1)
当前图层
内阴影
演示盒子
预设
预览
如何使用 Box Shadow 生成器
- 点击「添加图层」最多叠加 6 层阴影——在列表中选中任意图层即可编辑。
- 调节偏移 X/Y 移动阴影，再用模糊控制柔和度、扩散控制大小。
- 选择阴影颜色与不透明度；开启「内阴影」可做出内凹深度效果。
- 设置演示盒子的颜色、背景与圆角，使其贴近您的真实组件。
- 在 CSS 标签页复制结果，或切换到 Tailwind 标签页获取工具类。
关于本 Box Shadow 生成器
CSS 的 box-shadow 属性接受逗号分隔的阴影列表，每个阴影包含水平/垂直偏移、模糊半径、扩散半径、颜色以及可选的 inset 关键字。手写多层阴影非常繁琐：一个数值的微小变化就可能彻底改变效果。本生成器为每层提供独立控件，并实时展示叠加后的效果。
可以从预设出发——从细腻的「柔和」悬浮到 Material 风格的分层深度、硬朗的「硬边」复古阴影以及发光的「霓虹」效果。负扩散值非常适合做出自然的照片级阴影。生成的 CSS 适用于所有现代浏览器，Tailwind 输出使用兼容 Tailwind CSS v3+ 的任意值语法。
Box Shadow 常见问题
如何创建多层 box-shadow？
点击「添加图层」即可叠加阴影。每层都有独立的偏移、模糊、扩散、颜色、不透明度与内阴影设置。CSS 输出会自动用逗号连接所有图层；用箭头按钮可以调整顺序——第一层渲染在最上方。
box-shadow 的扩散值有什么作用？
扩散会在模糊之前扩大（正值）或收缩（负值）阴影。正扩散让阴影比元素更大——适合做描边与霓虹光晕；负扩散让阴影内收，配合大模糊可以做出柔和自然的深度感。
如何制作内阴影（inset）？
在任意图层上开启「内阴影」开关即可。内阴影渲染在元素内部，可做出按压或浮雕效果。甚至可以在同一条 box-shadow 声明中混合内阴影与普通阴影。
生成的 Tailwind 类名有效吗？
有效。Tailwind 输出使用任意值语法，如 shadow-[0_8px_24px_-6px_rgba(30,27,75,0.35)]，Tailwind CSS v3 及以上版本（含 v4 引擎）无需配置即可使用。
为什么阴影在我的页面上看起来不一样？
阴影会受到元素尺寸、圆角与背后背景的影响。把演示盒子的颜色、圆角和背景调成与真实组件一致，即可获得准确的预览效果。