阴影生成器
免费在线CSS阴影生成器。可视化创建盒子阴影效果。调整模糊、扩散、颜色和偏移，生成CSS代码一键复制。
预览
图层 ()
预设
图层
CSS代码
方法与限制
每层按像素写入 X、Y、模糊和扩展，再写入 RGBA 及可选的 inset。多个图层用逗号分隔，顺序会影响叠加。
X、Y、扩展范围为 −50…50，模糊为 0…100，不透明度为 0…100%。HEX 支持 #RGB 或 #RRGGBB。任何图层不完整或无效时，组合输出都会清空。
已复制
复制失败。请选择结果并手动复制。
关于阴影生成器
为卡片、按钮和容器组合 CSS 阴影，分别编辑各图层或选用六种预设。圆角和圆形预览可用于比较同一组设置。
X=5、Y=5、模糊=20、扩展=0、黑色且 25% 不透明：box-shadow: 5px 5px 20px 0px rgba(0,0,0,0.25);
示例使用所述尺寸和颜色，外观也取决于目标布局和浏览器。
使用场景
如何使用
选择预设或保留初始图层。
选择图层并设置带正负号的 X/Y 偏移。
设置模糊、扩展及完整的 HEX 颜色。
调整不透明度或 inset，并添加或删除图层。
比较形状预览并复制当前 CSS。
专业提示
- 扩展可放大或缩小阴影，模糊使边缘变柔和。负 X/Y 向左或向上移动。悬停效果仍需放入自己的样式表检查。
- 生成器在浏览器内存中计算 CSS，不保存阴影结果。网站主题可能使用 localStorage；页面的其他请求是独立的。
- 多层阴影创造更逼真的深度
- 使用微妙的阴影进行专业设计
- 考虑设计中的光源一致性
故障排除
请检查完整的 HEX 颜色和数值范围；当前输出不可用。
X、Y、扩展范围为 −50…50，模糊为 0…100，不透明度为 0…100%。HEX 支持 #RGB 或 #RRGGBB。任何图层不完整或无效时，组合输出都会清空。
为什么 0% 会隐藏内阴影？
Inset 选择内部位置；alpha 0 让该层透明。两个设置都会保留在 CSS 中。
常见问题解答
Inset 选择内部位置；alpha 0 让该层透明。两个设置都会保留在 CSS 中。
添加图层，再逐层选择并编辑。复制的声明以逗号分隔所有图层，且至少保留一层。
盒子阴影是一个CSS属性，它在元素周围添加阴影效果，创造深度感和视觉层次。
是的，您可以用逗号分隔添加多个阴影以创建复杂效果。这常用于更逼真的阴影。