CSS渐变生成器 — 线性渐变与径向渐变

使用方法

1. 选择线性渐变或径向渐变。
2. 选择起始颜色和结束颜色。
3. 线性渐变需要设置角度，然后在 0 到 100% 之间调整两个色标的位置。
4. 查看预览，把 CSS 复制到目标元素的样式规则中。

色标与方向

颜色以六位十六进制格式输出。第一个色标之前保持第一种颜色，第二个色标之后保持第二种颜色，两者之间是过渡区域。起始位置不能大于结束位置。

线性渐变沿所选角度变化。径向渐变使用 radial-gradient(circle, ...)，从中心向外扩散，此时不使用角度设置。如果最终元素的尺寸与预览不同，颜色的可见分布也可能随之变化。

示例

• linear-gradient(90deg, #6366f1 0%, #ec4899 100%) 从左侧的紫色过渡到右侧的粉色。
• 两个色标都设为 50%，两种颜色之间会出现一条清晰的分界。
• 在径向模式下，把第一个色标移到 25%，中心的纯色区域会变大，之后才开始混合。

应用结果

生成的声明使用 background 简写属性，它可能会重置同一元素上的其他 background 属性。粘贴到样式表之前，请先检查已有的规则。

本工具只支持两种不透明的颜色。需要更多色标或透明色时，请另外编辑复制出的 CSS。如果渐变上有文字，请检查文字背后各个区域的对比度，而不要只看一端的颜色。预览只展示背景效果，并不是完整的无障碍检查。生成过程在你的浏览器中完成。