CSS 渐变生成器（多图层、重复）

最多叠加四层线性、径向或锥形渐变来制作背景，并给出 background-image 的 CSS。半透明图层可以做出光效或网格渐变，重复可以做出条纹和同心圆，图片还可以保存为 PNG。

使用方法

1. 从“预设”中的一个方块或默认设置开始。在“图层”中选择要编辑的图层，并设置“类型”“角度”和“重复”。
2. 对于径向和锥形图层，在预览上点击或拖动来移动中心，并选择“形状”和“大小”。
3. 点击“色标”渐变条添加色标，拖动圆点移动色标。在下方调整所选色标的颜色、“不透明度”“位置”和“中点”。
4. 点击“添加图层”在上方叠加一个半透明图层；调整顺序或“隐藏”图层来对比效果。
5. 点击 CSS 旁边的“复制”，或者选择“PNG 尺寸”后点击“保存为 PNG”。

计算方式与说明

• 输出是一条 background-image 声明；图层按 CSS 顺序从上到下绘制。半透明颜色写作 rgb(r g b / a)。
• 中点是 CSS 的过渡提示，用来移动两个色标各占一半的混合位置。重复会像 repeating-linear-gradient 一样平铺从第一个色标到最后一个色标的区间。
• 角度和径向大小关键字遵循 CSS Images 3，颜色按浏览器默认的 sRGB 混合。PNG 在浏览器中按相同规则绘制。
• 您的图层和色标会保存在当前浏览器中。

常见问题

如何在 CSS 中叠加多个渐变？

在 background-image 中用逗号把它们列出来。第一个绘制在最上面，所以上层需要一定的透明度。CSS 框输出的就是这种写法。

如何制作条纹背景？

打开“重复”，并把两个同色的色标放在同一位置，就能得到清晰的边界。“条纹”预设可以快速上手。

渐变中间看起来发灰，怎么办？

打开“中点”来移动混合位置，或者在中间添加一个想要颜色的色标。互补色混合后会变成灰色。

预览和 PNG 会有差别吗？

预览由浏览器根据 CSS 绘制，PNG 按相同规则计算。除了取整误差之外两者一致。