如何生成 CSS 线性和径向渐变代码

填写渐变类型、方向和颜色后生成 CSS；类型恰好为 linear 时得到线性渐变，其他类型文本会得到圆形径向样式。

先了解输入项和默认值

这个工具适合在制作网页样式时快速生成 CSS 渐变代码。你可以提供渐变类型、方向和颜色文本；如果不填写，这些输入会分别采用 linear、to right 以及 #ff7e5f, #feb47b 作为默认值。工具支持线性分支，也会针对其他渐变类型文本生成圆形径向样式代码。

生成 CSS 渐变代码的步骤

1. 打开 CSS 渐变生成工具，找到渐变类型、方向和颜色对应的文本输入框。
2. 在渐变类型中输入 linear，即可使用线性渐变分支；如需径向样式，则输入其他类型文本。
3. 在线性渐变的方向输入框中填写方向文本，例如 to right。在线性分支中，这段文本会被放入生成的线性渐变代码。
4. 在颜色输入框中填写颜色，并用逗号或空格分隔，例如 #3498db, #9b59b6。工具会拆分这些文本，去除每项两侧的空格，再用逗号和一个空格连接。
5. 提交或生成结果，查看返回的 CSS 代码并复制到网页样式中。若省略输入，先确认默认的类型、方向和颜色是否符合你的设计需求。

如何理解生成结果

结果应是一段可用于 CSS 渐变样式的代码。类型文本恰好为 linear 时，结果采用线性渐变，并包含你填写的方向文本；类型文本不是 linear 时，结果采用圆形径向渐变样式。颜色列表会按照输入后的拆分和重新连接规则呈现，因此逗号、空格的位置可能与原始输入不同。

请把生成结果当作代码草稿来检查：确认渐变类型、方向文本和颜色文本符合你的设计意图，再放入项目样式中。工具的已知行为是处理并生成这些文本，不应把生成过程视为颜色名称、颜色语法或方向语法的校验。

使用示例

你正在制作一个蓝紫色网页背景，并希望根据两种颜色生成圆形径向渐变。

在类型输入中填写 radial，在颜色输入中填写 #3498db, #9b59b6，然后生成结果。

结果应为 CSS 渐变代码，使用圆形径向渐变样式，并将颜色处理为 #3498db, #9b59b6 这样的逗号加空格列表。

使用限制

• 工具会按既定规则处理输入文本，但已知能力不包含对颜色或方向语法的校验；请在使用生成代码前自行检查输入和 CSS 结果。

常见错误

• 如果想要线性渐变，却在类型输入中填写了 linear、其他拼写或其他文本，结果会进入非线性分支并生成圆形径向样式。请将类型文本准确填写为 linear，再重新生成。

常见问题

如何生成 CSS 线性渐变？

可以。将类型文本准确填写为 linear，并在方向输入中填写所需方向；生成的线性渐变代码会包含这段方向文本。

如何生成 CSS 径向渐变？

当类型文本不是 linear 时，结果会使用圆形径向渐变样式。工具支持的是这一路径的径向样式行为，而不是这里未说明的其他渐变模式。

颜色输入中的逗号和空格会怎样处理？

颜色文本会按逗号或空白拆分，每项两侧的空格会被去除，随后用逗号和一个空格重新连接。