适用人群
- 制作卡片与按钮的用户
- 学习阴影参数的开发者
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 代码”按钮。
调整一层 CSS 阴影并导出当前代码
设置卡片或按钮的水平、垂直偏移、模糊、扩展、颜色与不透明度。比较外阴影和 inset，并将预览圆角一起导出。
使用场景
- 创建柔和的卡片阴影。
- 制作内凹表面的效果。
从输入到检查结果
- 1
设置 X、Y 偏移，然后调整模糊与扩展。
- 2
选择 HEX 颜色和不透明度。
- 3
选择外阴影或 inset，并调整预览圆角。
- 4
生成一次 CSS，后续修改会自动更新代码。
- 5
复制或下载后，在实际背景上确认效果。
柔和卡片阴影
- 输入
- X 0 · Y 8 · 模糊24 · 扩展-8 #000000 · 不透明度22% · 外阴影
- 结果
- box-shadow: 0px 8px 24px -8px rgba(0, 0, 0, 0.22);
负扩展缩小阴影的基础区域，模糊使边缘柔和。
内凹表面
- 输入
- X 0 · Y 2 · 模糊6 · 扩展0 #000000 · 不透明度20% · inset
- 结果
- box-shadow: inset 0px 2px 6px 0px rgba(0, 0, 0, 0.2);
阴影绘制在盒子内部。
计算与处理原理
将偏移、模糊、扩展及 RGBA 色组合为一个 box-shadow。颜色接受 #RGB 或 #RRGGBB，不透明度由百分比换算为 alpha。输出针对 .shadow-box，同时包含 border-radius，内联 HTML 示例放在 CSS 注释中。
限制与注意事项
- 一次只生成一层阴影，多层逗号分隔阴影需要自行编辑。
- 模糊不能为负数，但偏移与扩展可以为负数。
- 固定预览环境无法复现所有实际组件和主题。
- 父元素的 overflow 裁剪可能遮住外阴影。
数据处理
设置在浏览器内处理，不上传。复制和下载的 CSS 包含所选参数。
参考资料
相关工具
常见问题
预览圆角也会写入 CSS 吗？
会。输出包含 box-shadow 和 border-radius。若组件已有圆角样式，可移除圆角声明。
为什么放到另一个页面后颜色不同？
半透明阴影会与背景混合。请在实际的明暗主题背景上检查。
颜色无效时还能复制旧结果吗？
不能。无效的 HEX 会清除可导出的结果，请修正后再复制或下载。