CSS 盒子阴影生成器
可视化创建 CSS 盒子阴影，实时预览
0
4
10
0
25
box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.25);🐛
报告问题 / 提出建议
发现 Bug 或有建议？帮助我们改进这个工具。
这是什么工具？
CSS 盒阴影生成器创建可用于生产的 box-shadow 声明并提供实时预览。支持单层和多层阴影，可控制水平/垂直偏移、模糊半径、扩散半径、颜色和內嵌选项。无需手动编写 CSS 即可可视化生成复杂阴影效果。
如何使用
- 1
添加阴影层
点击添加创建新的阴影层。
- 2
调整参数
设置每层的 X/Y 偏移、模糊、扩散、颜色和透明度。
- 3
预览并复制
查看实时预览并复制生成的 CSS 代码。
常见问题
box-shadow 怎么工作？
box-shadow 在元素边框周围添加阴影效果。语法：box-shadow: 水平偏移 垂直偏移 模糊 扩散 颜色 inset。多个阴影用逗号分隔。浏览器独立渲染每层阴影并合成。使用多层可创建复杂的深度效果。
怎样做出真实的阴影？
真实的阴影模糊半径通常是偏移量的 3-5 倍，透明度较低（10-30%），颜色略带暖色调。多层不同模糊的阴影创建更自然的深度感。
结果不对该怎么办
请双校输入值。工具使用标准公式但边界情况可能需要手动验证。