如何生成 CSS 线性或径向渐变

先了解输入项和适用场景

这个工具可根据两个颜色值生成 CSS 渐变文本，适合为网页背景、卡片或其他样式准备渐变代码。它支持线性渐变和圆形径向渐变，并可接收角度与渐变类型。使用时应先确定两个颜色值，再根据需要调整类型和角度。如果省略输入，工具会采用预设颜色、45 度和线性渐变。

生成 CSS 渐变的操作步骤

1. 在第一个颜色输入中填写起始颜色，在第二个颜色输入中填写结束颜色。工具会把输入的颜色值直接放入生成的 CSS 文本，因此请自行确认它们符合所需的 CSS 颜色写法。
2. 设置渐变类型。输入 linear 时生成线性渐变；输入完全匹配的 radial 时生成圆形径向渐变。
3. 如需控制线性渐变方向，填写角度。角度会先转换为整数，再按 360 度取模；如果无法转换为整数，工具会使用 45 度。
4. 生成并查看 CSS 文本。省略第一个颜色时使用 #ff6b6b，省略第二个颜色时使用 #4ecdc4；省略角度时使用 45 度，省略渐变类型时使用线性渐变。

如何理解生成结果

生成结果是 CSS 渐变文本，不是图片文件。线性结果会使用输入的角度和两个颜色值，径向结果则会以圆形径向渐变形式使用这两个颜色值。需要特别注意，只有 linear 和完全匹配的 radial 具有对应的渐变形式。如果输入其他类型值，结果会采用线性渐变格式，但返回数据中的类型值仍会保留为输入内容。角度的整数转换和取模也意味着，结果中的角度可能与原始输入的写法不同。

使用示例

你正在为网页卡片制作从紫色过渡到青色的圆形径向背景。

为网页卡片背景输入 #6c5ce7 和 #00cec9，选择 radial 后生成结果。

结果应为包含两个指定颜色的 CSS 圆形径向渐变文本，而不是图片文件。

使用限制

• 工具不会单独验证颜色值；除 linear 和完全匹配的 radial 外，其他类型会采用线性格式；角度会经过整数转换并按 360 度取模，无法转换时使用 45 度。

常见错误

• 如果生成结果中的颜色无法按预期显示，可能是输入值不符合 CSS 颜色写法。请检查颜色格式并重新生成，因为工具会直接插入颜色值，不会单独验证颜色是否有效。

常见问题

这个工具能生成径向渐变吗？

可以。输入完全匹配的 radial 后，结果会使用两个颜色值生成圆形径向渐变；输入 linear 时则生成线性渐变。

角度不填写或填写错误时会怎样？

如果不填写角度，会使用 45 度；如果填写的内容无法转换为整数，也会回退到 45 度。能够转换的角度会先转为整数，再按 360 度取模。

工具会检查颜色是否有效吗？

工具不会单独检查颜色是否有效。输入的颜色值会直接插入生成的 CSS 文本，因此应自行确认其符合 CSS 颜色写法。