Developer Design Utility
Box Shadow 生成器
实时调整卡片、按钮、模态框和横幅的 CSS box-shadow 值，并生成自然的 SaaS 风格阴影代码以及 inline style 示例。
Box Shadow 生成
通过调整 X/Y 偏移、Blur、Spread、颜色和透明度来创建阴影。
实时预览
阴影效果会立即反映到 Preview Card 中。
复制 CSS 代码
可复制生成的 box-shadow 代码或下载为 CSS 文件。
Shadow Type
Outer
Offset
0px / 18px
Blur / Spread
48px / 0px
Opacity
18%
Shadow 设置
调整阴影位置、模糊程度、扩散值、颜色和透明度，创建理想的层次感。
-80px
0px
80px
-80px
18px
80px
0px
48px
120px
-50px
0px
50px
黑色系适合自然卡片阴影，彩色系适合 Glow 发光效果。
0%
18%
100%
Outer 创建外部阴影，Inset 创建内部阴影。
0px
24px
60px
Live Preview
Box Shadow
Preview Card
设置的阴影效果会实时显示在这里。
X / Y
0px / 18px
Blur
48px
Opacity
18%
推荐预设
快速应用常用于卡片、横幅、按钮和发光效果的阴影组合。
基础卡片阴影
Glow / 强调效果
特殊阴影
生成结果
可将下方代码用于 CSS 文件、组件样式或 inline style。
请选择设置后点击“生成 CSS 代码”按钮。
帮助
什么时候使用 Box Shadow 生成器？
当希望卡片、按钮、模态框、下拉菜单或图片容器具有悬浮效果时使用。在 SaaS 风格界面中，柔和的阴影能够自然地增强层次感。
box-shadow 参数顺序
box-shadow 通常按照 X Offset、Y Offset、Blur、Spread、Color 的顺序编写。
- X Offset：阴影左右移动距离
- Y Offset：阴影上下移动距离
- Blur：阴影模糊程度
- Spread：控制阴影扩散范围
- Color：阴影颜色和透明度
推荐数值
- 普通卡片：Y 8px~18px，Blur 24px~48px，Opacity 10%~18%
- 大型 SaaS 卡片：Y 16px~24px，Blur 40px~64px，Opacity 14%~22%
- 按钮 Hover：Y 4px~8px，Blur 10px~20px，Opacity 12%~20%
- Glow 效果：彩色阴影 + Blur 36px 以上
Outer Shadow 与 Inset Shadow 的区别
Outer Shadow 在元素外部创建阴影，使卡片看起来悬浮；Inset Shadow 在元素内部创建阴影，适合制作按压面板或输入框效果。
如何创建自然的卡片阴影？
建议使用黑色或深蓝色系，并将 Opacity 控制在 10%~20%。较大的 Blur 和 0 或负值 Spread 可以获得柔和自然的阴影。
如何制作 Glow 发光效果？
选择蓝色、紫色等强调色，并将 Blur 提高到 36px 以上，即可获得发光效果。
阴影太重时如何调整？
降低 Opacity 或提高 Blur 值可以让阴影更柔和。在一般 UI 中，柔和阴影通常比浓重阴影更自然。