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

什么是渐变生成器？

渐变生成器是一款基于浏览器的可视化编辑器，用于创建CSS渐变（线性、径向和锥形），支持多个色标和可调参数。它输出生产就绪的CSS代码，可直接复制到任何样式表中。工具在每次修改时实时预览渐变效果，无需在编辑器和浏览器开发者工具之间反复切换。设计师用它来原型化渐变背景并生成精确的CSS；开发者用它来导出可扩展资产的SVG渐变文件。

主要功能

• 线性、径向和锥形渐变 — 单击即可选择三种不同的渐变类型。每种类型输出正确的CSS函数：linear-gradient()、radial-gradient() 或 conic-gradient()。
• 带位置的多个色标 — 可添加任意数量的色标。每个色标都有颜色选择器、hex输入框和0%至100%的位置滑块。最少需要两个色标；尝试删除最后两个时工具会显示错误提示。
• 可调渐变角度 — 滑块控制线性和锥形渐变的角度（0°至360°）。角度直接嵌入CSS输出中。
• 实时CSS代码生成 — CSS输出卡片在每次更改时立即更新。输出格式为 background: linear-gradient(90deg, #8E2DE2 0%, #4A00E0 100%); — 可直接粘贴使用。
• 即时渐变预览 — 工具顶部256px高的预览面板使用实时CSS值作为内联样式渲染渐变效果。
• 一键复制CSS — 复制CSS按钮将完整的 background: ...; 声明复制到剪贴板，并将条目记录到历史记录中。
• 重复渐变支持 — 目前未作为单独控件显示，但可手动编辑CSS输出，将 linear-gradient 替换为 repeating-linear-gradient。
• 浏览器兼容的CSS输出 — 生成的CSS使用所有现代浏览器均支持的标准无前缀语法。

如何使用渐变生成器

第一步：选择渐变类型

进入即将推出: 渐变生成器。工具以默认线性渐变打开——从 #8E2DE2（紫色）0% 到 #33FFDD（亮青色）100%，90度渲染。

在渐变类型卡片中，点击三个按钮之一：线性、径向或锥形。预览立即更新。对于线性和锥形类型，类型选择器下方会出现角度滑块。

第二步：设置角度（仅限线性和锥形）

将角度滑块拖至0到360度之间。当前角度值显示为标签（例如 角度：135°）。0°从上到下，90°从左到右，180°从下到上，270°从右到左。每次移动滑块时预览都会更新。

对于径向渐变，由于 radial-gradient(circle, ...) 不使用角度参数，角度控件被隐藏。

第三步：配置色标

色标卡片将每个色标列为一行，包含：

• 原生颜色输入（彩色方块）— 点击打开浏览器颜色选择器
• 显示当前颜色值的 hex文本输入框
• 0至100%的位置滑块
• 位置百分比标签（例如 45%）
• 删除按钮（垃圾桶图标）

颜色输入和hex输入都更新同一个色标。更改任意一个都会立即刷新预览。

点击添加色标，在随机位置插入一个默认白色的新色标。编辑颜色和位置将其放置在需要的地方。

第四步：删除色标

点击任意色标行上的垃圾桶图标将其删除。如果只剩两个色标，点击删除会显示错误消息"至少需要2个色标"（toast提示），并保留两个色标不变。

第五步：复制CSS输出

CSS输出卡片显示完整声明：

background: linear-gradient(90deg, #8e2de2 0%, #33ffdd 100%);

点击复制CSS将此字符串复制到剪贴板。成功提示确认复制完成。该条目也会记录到历史记录面板（支持者账户专用），包含渐变类型、角度和CSS值。

第六步：导出为SVG（支持者功能）

点击SVG按钮（带下载图标）将渐变导出为SVG文件。对于线性渐变，SVG使用带 gradientTransform="rotate(angle, 0.5, 0.5)" 属性的 <linearGradient> 元素。对于径向渐变，使用 <radialGradient>。文件以 gradient.svg 名称下载。这是高级支持者功能。

第七步：随机化或重置

点击随机化（循环箭头图标）生成带两种随机颜色和随机角度的新渐变。点击清除将渐变重置为默认的90°紫色到青色线性渐变。

实用示例

主视觉区域背景渐变

想要为落地页主视觉区域创建从 #667EEA（中等蓝紫色）到 #764BA2（深紫色）的135°对角渐变。将类型设为线性，将角度滑块拖至135，将色标1改为0%处的 #667EEA，色标2改为100%处的 #764BA2。点击复制CSS并粘贴：

.hero {
  background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
}

径向聚光灯效果

想要一个照亮卡片中心的径向渐变。将类型设为径向。将色标1改为0%处的 #FFFFFF，在50%处添加第三个色标 #F1F5F9，将色标2（现在是色标3）设为100%处的 #CBD5E1。输出：

background: radial-gradient(circle, #FFFFFF 0%, #F1F5F9 50%, #CBD5E1 100%);

用作白色卡片表面的微妙深度效果。

锥形色轮预览

将类型设为锥形，角度设为0°。添加六个均匀分布的色标：红色（#FF0000）0%、黄色（#FFFF00）17%、绿色（#00FF00）33%、青色（#00FFFF）50%、蓝色（#0000FF）67%和洋红色（#FF00FF）83%。最后一个色标自然地回到红色。导出为SVG，在色彩理论图表中使用该色轮。

技巧与最佳实践

生成CSS前，色标按位置排序。 可按任意顺序添加色标——工具始终在写入输出前对其升序排列。在滑块中将0%的色标拖过50%的色标，CSS会正确重新排序。

使用随机化按钮作为创意起点。 随机化器生成两种随机hex颜色和一个随机角度。反复点击直到找到值得细化的调色板，然后手动调整颜色。

粘贴现有渐变进行反向工程。 工具目前还不支持直接粘贴CSS渐变字符串。但可以从现有渐变中提取色标值并手动输入。

可共享的URL编码所有渐变参数。 渐变类型、角度和色标（作为紧凑的 颜色:位置 字符串）被序列化到页面URL中。复制URL与团队成员共享精确的渐变配置。

SVG导出使用400×200px画布。 导出的 gradient.svg 具有 width="400" height="200" 和用渐变填充整个画布的 <rect> 元素。SVG与分辨率无关，可自由缩放。

最少两个色标通过toast消息强制执行。 只剩两个色标时尝试删除，错误toast显示"至少需要2个色标"——渐变需要至少两个色标才能成为有效的CSS。

常见问题与故障排除

CSS输出显示 background: ;（空渐变）。 正常使用时不应发生此情况。如果色标数组以某种方式为空（仅在URL状态损坏时可能发生），generateCss 函数返回空字符串。使用重置按钮清除工具，或重新加载页面以恢复默认状态。

输入后色标hex输入框显示错误颜色。 hex输入直接与色标的颜色值绑定。输入无效的hex值（例如 #ZZZZZZ）时，颜色选择器输入不会更新，可能显示之前的有效颜色。将hex更正为有效的6位值。

位置滑块难以精确定位。 滑块以1%为增量接受值。如需精确定位，直接输入百分比——但当前UI只使用滑块。使用附近的整数，并在CSS输出中验证。

径向渐变看起来不居中。 生成的径向渐变使用默认居中于50% 50%的 radial-gradient(circle, ...)。添加 circle at X% Y% 在UI中尚不可用。在样式表中手动编辑复制的CSS以重新定位中心。

SVG导出仅显示线性或径向。 SVG导出函数将线性渐变处理为 <linearGradient>，将所有其他类型（包括锥形）处理为 <radialGradient>。锥形渐变没有SVG等效项，因此在SVG导出中回退为径向。

历史记录恢复仅部分恢复状态。 历史恢复功能从存储的历史条目文本中解析渐变类型和角度。它不从历史记录中恢复色标（色标保存在可共享的URL状态中）。使用共享URL进行完整状态恢复。

隐私与安全

渐变生成器完全在浏览器中运行。CSS生成、色标管理和SVG导出逻辑均为纯JavaScript。不向任何外部服务器发送渐变配置、颜色值或使用数据。SVG导出使用 downloadText 写入本地文件——不发生上传。工具在页面加载后可完全离线工作，可安全用于专有或未发布的设计资产。

常见问题解答

渐变生成器是免费的吗？

是的。所有核心功能——线性、径向和锥形渐变创建，多色标，角度控制，CSS复制和随机化——无需账户即可免费使用。SVG导出按钮是高级支持者功能，需要Ko-fi支持者订阅。

渐变生成器可以离线使用吗？

是的。页面加载后，所有渐变生成、预览渲染和CSS输出无需网络即可工作。唯一依赖网络的功能是初始页面加载和共享URL，共享URL将状态编码在URL本身中（读取状态无需调用服务器）。

我的数据在渐变生成器中安全吗？

是的。没有渐变参数或颜色值被传输到任何服务器。工具没有用于渐变生成的后端。您的设计完全保留在您的设备上。可共享URL将状态编码在URL字符串本身中——没有服务器存储它。

工具支持哪些CSS渐变类型？

工具支持三种CSS渐变类型：linear-gradient()、radial-gradient() 和 conic-gradient()。CSS输出使用标准无前缀语法。浏览器兼容性方面，linear-gradient 和 radial-gradient 在所有现代浏览器中均可使用；conic-gradient 需要Chrome 69+、Safari 12.1+和Firefox 83+。

如何创建多色标渐变？

点击添加色标插入额外的色标。每个新色标以白色默认颜色出现在随机位置。点击颜色色块或输入hex值设置颜色，然后拖动位置滑块进行定位。色标数量没有上限。

可以删除色标吗？

可以。点击任意色标行上的垃圾桶图标。如果只剩两个色标，工具会阻止删除并显示toast提示："至少需要2个色标。"有效的CSS渐变至少需要两个色标。

导出的SVG文件包含什么？

SVG导出创建一个400×200px的文件，包含带 <linearGradient>（线性类型）或 <radialGradient>（径向和锥形类型）的 <defs> 块，以及用该渐变填充整个画布的 <rect> 元素。文件命名为 gradient.svg 并自动下载。

可以在Tailwind CSS中使用生成的CSS吗？

可以。将 linear-gradient(...) 值（不含 background: 前缀）粘贴到Tailwind配置中作为自定义背景图像：

backgroundImage: {
  'brand-gradient': 'linear-gradient(135deg, #667EEA 0%, #764BA2 100%)',
}

然后在HTML中使用 bg-brand-gradient。

工具支持透明色标吗？

颜色输入只接受不透明的hex值（6位）。要创建带透明度的渐变，复制CSS输出并在样式表中手动将色标颜色修改为 rgba() 表示法，例如：linear-gradient(90deg, rgba(142, 45, 226, 0) 0%, #4A00E0 100%)。

如何与他人共享渐变？

配置渐变后从浏览器地址栏复制URL。URL编码了渐变类型、角度和所有色标值。在另一台设备上打开该URL会加载完全相同的渐变。也可以使用页面底部的分享按钮发布到Twitter、LinkedIn、Reddit，或直接复制链接。

相关工具

• 即将推出: UI Gradients — 浏览精选的命名渐变库，直接复制其CSS值。
• Color Picker — 使用取色器或格式输入找到精确的hex颜色，然后将其作为渐变色标添加。
• 即将推出: Color Blender — 生成两个值之间的平滑中间颜色，便于手动规划多色标渐变。
• 即将推出: Palette Generator — 生成和谐的调色板，用作渐变色标来源。

立即试用渐变生成器：即将推出: Glyph Widgets渐变生成器