CSS 盒子阴影生成器
可视化创建 CSS 盒子阴影，实时预览效果。支持多层阴影叠加、内阴影和完全自定义。
盒子颜色
边框圆角12px
阴影图层
图层 1
X 偏移5px
Y 偏移5px
模糊15px
扩展0px
颜色
不透明度35%
CSS 代码
如何在线创建 CSS 盒子阴影
- 1.使用滑块调整阴影偏移（X 和 Y）、模糊半径和扩展半径。
- 2.选择阴影颜色并调整不透明度以达到理想效果。
- 3.切换内阴影创建内部阴影效果。点击+ 添加图层叠加多个阴影。
- 4.实时预览变化，然后点击复制 CSS在项目中使用。
常见问题
box-shadow 的值是什么？
CSS box-shadow 属性接受：offset-x、offset-y、blur-radius、spread-radius 和 color。可选添加 "inset" 关键字创建内阴影。例如：box-shadow: 5px 5px 15px 0px rgba(0,0,0,0.35);
可以使用多层阴影吗？
可以！CSS 支持用逗号分隔的多个盒子阴影。本工具允许你添加多个阴影图层，它们相互叠加以创建复杂的阴影效果。
模糊和扩展有什么区别？
模糊半径控制阴影的模糊程度（值越大越柔和）。扩展半径扩大或缩小阴影尺寸。正值的扩展使阴影变大，负值使阴影比元素更小。
什么是内阴影？
内阴影出现在元素内部而不是外部。它们创建一种按压或嵌入的效果。在任意阴影图层上切换"内阴影"复选框即可将其设为内部阴影。