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%
STEP 1
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%
STEP 2
推荐预设
快速应用常用于卡片、横幅、按钮和发光效果的阴影组合。
基础卡片阴影
Glow / 强调效果
特殊阴影
STEP 3
等待中
生成结果
可将下方代码用于 CSS 文件、组件样式或 inline style。
请选择设置后点击“生成 CSS 代码”按钮。
帮助
什么时候使用 Box Shadow 生成器？
当希望卡片、按钮、模态框、下拉菜单或图片容器具有悬浮效果时使用。在 SaaS 风格界面中，柔和的阴影能够自然地增强层次感。
使用方法
- 调整 Offset、Blur、Spread、颜色、透明度和 Shadow Type。
- 在 Preview Card 中实时确认阴影层次和卡片圆角。
- 应用推荐预设，快速比较卡片、按钮、Glow 和 Inset 阴影。
- 生成 CSS 代码后，复制结果或下载为 CSS 文件。
如何创建自然的卡片阴影？
建议使用黑色或深蓝色系，并将 Opacity 控制在 10%~20%。较大的 Blur 和 0 或负值 Spread 可以获得柔和自然的阴影。
如何制作 Glow 发光效果？
选择蓝色、紫色等强调色，并将 Blur 提高到 36px 以上，即可获得发光效果。
阴影太重时如何调整？
降低 Opacity 或提高 Blur 值可以让阴影更柔和。在一般 UI 中，柔和阴影通常比浓重阴影更自然。