Box Shadow Generator

关于本工具

水平 — 正值向右移动阴影，负值向左移动。垂直 — 正值向下移动，负值向上移动。模糊 — 值越大阴影越柔和扩散。扩展 — 正值扩大阴影，负值缩小阴影。

启用内嵌可创建内部阴影。点击"+ 添加阴影"添加多个阴影——它们在 CSS 输出中以逗号分隔，从前到后叠加。

使用方法

1. 调整水平和垂直滑块设置阴影偏移量。
2. 增大模糊值获得柔和阴影，设为 0 获得硬边阴影。
3. 使用扩展在元素边界外扩大或缩小阴影。
4. 点击"+ 添加阴影"叠加多个阴影获得更丰富的效果。

使用场景

设计师使用 box-shadow 为卡片 UI 组件增加深度和层次感。内嵌阴影可为按钮创建按下或凹陷效果。多层阴影能以环境光和主光产生逼真的光照效果。

常见问题

• inset 选项是什么？ — inset 阴影出现在元素边框内部而非外部，适合为输入框和按钮创建按下效果。
• 可以添加多个阴影吗？ — 可以。点击"+ 添加阴影"添加阴影层。所有阴影合并为一个逗号分隔的 box-shadow 声明。
• 负扩展值有什么作用？ — 负扩展使阴影比元素更小。与偏移和模糊组合，可创建仅从一侧微微露出的微妙阴影。