CSS阴影生成器 — box-shadow实时预览
为卡片、按钮等界面元素调出合适的 CSS box-shadow
在浏览器中处理 · 不上传任何内容
水平和垂直偏移为正时分别向右、向下移动。扩展为负值时阴影会缩小。
已生成阴影 CSS。
使用方法
- 设置水平偏移和垂直偏移，确定阴影的位置。
- 调整模糊和扩展，控制阴影的柔和程度和大小。
- 选择颜色和不透明度。需要在元素内部显示阴影时，勾选内阴影。
- 查看实时预览，复制生成的
box-shadow声明。
各数值的含义
水平偏移为正时向右移动，为负时向左移动。垂直偏移为正时向下移动，为负时向上移动。模糊必须大于或等于 0，数值越大边缘越柔和。扩展为正时阴影形状变大，为负时变小。
颜色以带 alpha 值的 RGB 通道输出。例如不透明度 25% 会写成 rgba(0, 0, 0, 0.25)。勾选内阴影后，阴影值的开头会加上 inset。
示例
box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.25); 会生成一个向下偏移 8 像素的柔和黑色阴影。水平偏移为 0，所以左右两侧是均衡的。
想让阴影更紧凑时，可以对比一下负的扩展值和较小的模糊值：它们改变的是效果的不同部分。对于内阴影，请在组件的最终尺寸下检查效果，因为内部可用空间的大小会影响能看到多少阴影。
限制与应用
偏移和扩展的范围是 -100 到 100 像素，模糊是 0 到 200 像素，不透明度是 0 到 100%。本生成器只生成一层阴影；需要多层效果时，请编辑复制出的 CSS，用逗号追加更多阴影值。
预览使用固定尺寸的盒子。实际元素的尺寸、圆角、背景以及祖先元素的 overflow 规则都可能改变阴影的外观。阴影不占用布局空间，所以当效果超出元素边框时，请在最终组件周围留出足够的空间。
常见问题
模糊和扩展有什么区别？
模糊让阴影边缘变柔和。扩展是在模糊之前放大或缩小阴影的形状。扩展为负值时阴影会变小。
inset 有什么作用？
inset 把阴影画在盒子内部而不是外部，可以用来做凹陷的输入框或按下的按钮效果。
为什么阴影在我的页面上被裁掉了？
祖先元素的 overflow 设置或可用空间不足都可能裁掉阴影。预览框也会裁掉超出边框的超大阴影。
