设计配色 · 渐变生成

渐变图导出

渐变→PNG/SVG 下载

本地处理 · 不上传 免费 · 无需登录 无次数限制 累计 55 次使用
方 向Linear Angle
135°
角度 angle
135°
色 标Color Stops · 拖拽编辑

条上点击新增色标 · 拖拽手柄改位置 · 双击手柄删除 · ≥2 标

颗 粒Grain · 现代质感噪点
强度 intensity
0
粗细 scale
模式 mode
预 设Gallery · 传统色渐变 + mesh 配色
linear · 1920×1080
尺 寸Export Size
×

就绪 · 渐变烘焙为图片资产 · 全程浏览器本地处理
第一节

关于本工具

About

设计师在 Figma 里调了半天渐变色,导出时发现背景色被压黑、切图边缘有锯齿。这个工具直接在浏览器里生成纯色到任意颜色的渐变,支持 PNG 和 SVG 两种格式:PNG 保留像素级平滑过渡,SVG 输出矢量代码可直接嵌入网页或图标。所有计算在本地完成,图片不经过服务器。

使用场景

公众号头图配色

公众号小编每周要出 4 张封面图,甲方给的主色是 #FF6B35 和 #2C3E50。以往在 PS 里拉渐变,每次都要手动调色阶、记参数,下个月换人做又得重来。用本工具把两个色值输进去,选「径向渐变」模式,直接生成一张 900×383 像素的 PNG 头图,SVG 格式还能存成代码模板,下次改色直接替换色值就行,不用开设计软件。

PPT 背景统一

公司年中汇报,8 个部门各交了一套 PPT,背景色深浅不一。行政要求统一成蓝紫渐变。逐个改幻灯片母版太慢,用本工具生成一张 1920×1080 的 SVG 渐变背景,SVG 文件只有 2KB,直接拖进 PPT 做母版背景,所有页面一次性替换,且 SVG 放大到投屏 4K 分辨率不模糊。

UI 切图标注

设计师给开发切图标时,需要在图标底部加一条 45° 渐变阴影。以前在 Sketch 里加阴影导出,每次都得调透明度、角度、距离。用本工具把图标底部的矩形选区填上线性渐变,色值从 #000000(20% 透明度)到 #000000(0% 透明度),导出 2x 倍率的 PNG,开发直接按这个切图标注的阴影参数写代码,不用反复沟通。

产品详情页背景

电商运营要上架一款新手机壳,详情页需要一个从手机主色(#E8D5B7)到浅灰(#F5F5F5)的渐变背景。在 PS 里做要新建图层、拉渐变、裁切,每款手机壳颜色不同就得重做一遍。用本工具把两个色值输入,选「线性渐变」方向为从上到下,生成 750×1334 像素的 PNG,直接作为详情页背景图上传,5 款手机壳 10 分钟搞定。

视频字幕底条

B 站 up 主做教程视频,字幕底部需要一条半透明渐变条,防止白字被浅色背景吃掉。以前用 Pr 做字幕模板,每次要新建颜色遮罩、拉渐变、调透明度。用本工具生成一条从 #000000(60% 透明度)渐变到 #000000(0% 透明度)的 PNG 底条,宽 1920 像素、高 120 像素,保存为素材,每次剪辑直接拖到字幕轨道上,不用再调参数。

印刷名片底纹

创业公司印 200 张名片,设计稿要求从深蓝到浅蓝的渐变底纹。印刷厂要求提供 300 DPI 的 CMYK 模式文件。在 PS 里新建文档、转色彩模式、拉渐变、调网点,流程繁琐。用本工具直接输入 CMYK 色值(C:100 M:60 → C:60 M:20),选择「线性渐变」方向为从左到右,导出 300 DPI 的 PNG,发印刷厂直接印,不用再担心色彩模式转换导致色差。

第二节

使用指南

Getting Started

使用步骤

  1. 1在「渐变类型」下拉框中选择「线性」或「径向」,画布预览区同步更新渐变方向
  2. 2点击「颜色 1」或「颜色 2」色块,弹出取色器后选色或输入十六进制值,预览区即时重绘
  3. 3拖动「角度」滑块(0-360°)或「径向半径」滑块(10-100%),渐变形态随拖动实时变化
  4. 4点击「导出为 PNG」或「导出为 SVG」按钮,浏览器自动下载对应格式文件,文件名含当前颜色值

输入输出示例

输入输出说明
颜色1:#FF0000,颜色2:#0000FF,方向:水平生成水平渐变 PNG(左红右蓝)和 SVG(<linearGradient> 标签)常规:最典型的两色水平渐变,验证基础功能是否正常
颜色1:#FFFFFF,颜色2:#000000,方向:对角(45°)生成对角渐变 PNG(左上白→右下黑)和 SVG(<linearGradient x1='0' y1='0' x2='1' y2='1'>)常规:黑白极色 + 非标准方向,验证角度参数解析正确性
颜色1:#FF0000,颜色2:#00FF00,颜色3:#0000FF,方向:径向生成径向渐变 PNG(中心红→中环绿→外环蓝)和 SVG(<radialGradient> 标签)常规:三色径向渐变,验证多色停靠点(stop)生成逻辑
颜色1:#000000,颜色2:#000000,方向:水平生成纯色 PNG 和 SVG(两色相同,渐变退化为纯色)边界:输入相同颜色,验证工具是否仍输出合法渐变(应输出纯色而非报错)
颜色1:#123456,颜色2:#ABCDEF,方向:垂直,尺寸:10×10 像素生成 10×10 像素垂直渐变 PNG 和 SVG边界:极小尺寸,验证像素级渲染是否正确(无锯齿或失真)
颜色1:#000000,颜色2:#FFFFFF,方向:无(仅输入两色)默认生成水平渐变(方向缺省时的兜底行为)易错:用户可能不填方向,需明确工具默认行为(水平)
颜色1:#GGG,颜色2:#000000,方向:水平提示「颜色格式错误,请输入 6 位十六进制颜色码」易错:非标准颜色码(#GGG)应被校验并给出明确错误提示
颜色1:#FF0000,颜色2:#0000FF,方向:水平,格式:SVG 仅导出仅生成 SVG 文件(不生成 PNG)易错:用户可能误以为格式选择仅影响预览,实际控制导出文件类型

常见错误对照

1.颜色值用了非十六进制格式

✗ 错误#ff00
✓ 修复#ff0000

十六进制颜色必须为 3 位或 6 位(如 #f00 或 #ff0000),4 位会被解析器忽略或报错。

2.颜色值包含空格或特殊字符

✗ 错误#ff 0000
✓ 修复#ff0000

十六进制颜色值内不允许有空格、逗号或括号,浏览器和 Canvas API 会直接丢弃无效值。

3.渐变方向写成了 CSS 函数

✗ 错误linear-gradient(to right, #f00, #00f)
✓ 修复90deg

本工具方向字段只接受角度(如 0deg、90deg)或关键词(top、bottom),不接受完整 CSS 渐变函数。

4.角度值带单位但写错

✗ 错误90rad
✓ 修复90deg

角度单位只支持 deg(度),rad(弧度)或 grad(百分度)会被解析为 0。

5.颜色数量少于 2 个

✗ 错误#ff0000
✓ 修复#ff0000, #0000ff

渐变至少需要两个颜色点,单个颜色无法形成过渡,工具会提示颜色不足。

6.颜色值使用了 CSS 命名色

✗ 错误red, blue
✓ 修复#ff0000, #0000ff

本工具仅支持十六进制颜色值,CSS 命名色(如 red、blue)会被视为无效输入。

7.颜色值大小写混用

✗ 错误#FF00ff
✓ 修复#ff00ff

虽然大小写不敏感,但建议统一小写以避免复制粘贴时因字体混淆(如 O 和 0)。

8.输出格式选了 SVG 但颜色值用了透明通道

✗ 错误#ff000080
✓ 修复#ff0000

SVG 标准不支持 8 位十六进制(含 alpha 通道),透明色必须用 rgba() 或 opacity 属性,本工具仅输出纯色。

第三节

工作原理

How It Works

核心公式

C(r, g, b, a) = (1 - α) × C_bg + α × C_fg

变量说明

  • C(r,g,b,a)最终像素颜色,含 RGBA 通道
  • α前景透明度,0~1 浮点数
  • C_bg背景色,RGB 值 0~255
  • C_fg前景色,RGB 值 0~255

示例

生成从#FF0000(红)到#0000FF(蓝)的渐变,取中间点α=0.5:C_r = (1-0.5)×255 + 0.5×0 = 127.5,C_g = (1-0.5)×0 + 0.5×0 = 0,C_b = (1-0.5)×0 + 0.5×255 = 127.5,最终颜色为(128,0,128)即紫色。

选择渐变类型设置颜色与角度(起点/终点色)浏览器内渲染(Canvas/SVG)导出PNG / SVG本地下载实时预览(所见即所得)调整参数(颜色/角度)
用户输入 本地处理 输出结果
第五节

常见问题

Q & A
怎么设置渐变色,我想让颜色从红色渐变到蓝色,但中间加个白色过渡?

在颜色设置区域,点击「添加色标」按钮(通常是 + 号),默认会新增一个色标,拖动色标到滑块中间位置,然后点击该色标,在颜色选择器里选白色即可。最多支持添加 10 个色标,每个色标的位置可以通过滑块微调,实现任意颜色序列的渐变效果。

导出 PNG 和 SVG 有什么区别?我该选哪个?

PNG 是位图,导出后是固定尺寸的像素图,适合直接用于网页、PPT 等不需要缩放的地方;文件较小,但放大后会有锯齿。SVG 是矢量图,导出后是代码描述,可以无限放大不模糊,适合用于 Logo、图标或需要后续编辑的场景;但文件可能稍大,且某些老旧浏览器不完全支持。本工具两种格式都支持,根据最终用途选择即可。

为什么我设置的渐变色导出后颜色变暗了,跟预览不一样?

通常是因为导出 PNG 时颜色空间或色深设置导致的。本工具预览使用浏览器渲染,导出时也基于浏览器,但如果你在颜色选择器中使用了超出 sRGB 色域的颜色(如某些高饱和度亮色),导出后颜色会被压缩到 sRGB 范围内,导致视觉上变暗。建议在颜色选择器里选择「安全色」或 sRGB 色域内的颜色,导出效果与预览基本一致。

我想导出和页面背景色一模一样的渐变,怎么取色?

本工具不内置取色器,但可以用以下方法:在浏览器中按 F12 打开开发者工具,使用「取色器」工具(吸管图标)点击页面背景,会显示该颜色的十六进制值(如 #f0f0f0)或 RGB 值。然后回到本工具的颜色选择器中,手动输入该十六进制值即可精确匹配。

导出 SVG 后,用 AI 或 Figma 打开颜色不对,怎么回事?

SVG 文件中的颜色定义是标准的,但不同软件对 SVG 的解析可能存在差异。本工具导出的 SVG 使用 `linearGradient` 或 `radialGradient` 标签,颜色值以十六进制或 RGB 形式存储。如果颜色不对,检查导入软件是否支持 SVG 1.1 标准;另外,某些软件(如旧版 AI)对渐变角度或色标位置的解析可能有偏差,建议在软件中手动微调渐变角度。

我想做水平渐变,但默认是垂直的,怎么改方向?

在渐变设置区域找到「角度」或「方向」选项,默认可能是 0°(从上到下)或 90°(从左到右)。输入 90 即可得到水平渐变(从左到右),输入 180 得到从下到上,输入 45 得到对角线渐变。也可以直接在预览区域拖动渐变控制线来直观调整方向。

这个工具需要上传图片吗?我电脑上的渐变图片能直接导进去吗?

本工具不需要上传任何文件,所有操作都在浏览器本地完成。它不是一个图片处理工具,而是一个「生成器」——你通过设置颜色、方向、形状等参数,工具直接生成新的渐变图并导出。如果你电脑上已经有渐变图片想修改,需要先用其他工具(如 PS)提取颜色值,再回到本工具重新创建。

导出 PNG 时图片边缘有锯齿,怎么解决?

锯齿通常出现在渐变边界或图像边缘。本工具导出 PNG 时默认使用抗锯齿渲染,但如果导出尺寸较小(如 100x100),锯齿会较明显。建议增大导出尺寸(如 1000x1000),然后在其他软件中缩放到所需大小。另外,如果渐变是硬边(如两种颜色直接切换),边缘锯齿会更明显,可尝试增加中间色标使过渡更平滑。

能不能导出透明背景的渐变图?我想放在深色背景上。

可以。在导出设置中,找到「背景」选项,选择「透明」即可。导出的 PNG 会包含 Alpha 通道,SVG 默认就是透明背景(除非在设置中指定了背景色)。注意:如果浏览器预览时显示白色背景,那是预览区域的默认底色,实际导出文件是透明的,可以下载后用 PS 或直接放在深色背景页面上验证。

为什么我复制颜色代码 #FF0000 粘贴进去后,颜色变成别的了?

颜色输入框支持多种格式(十六进制、RGB、HSL),但需要确保格式正确。例如 `#FF0000` 是标准六位十六进制,如果粘贴后多了空格或引号(如 `"#FF0000"` 或 `# FF0000`),工具无法解析,会回退到默认颜色。建议直接粘贴纯十六进制值(如 #FF0000),不要带任何额外字符。如果仍然有问题,尝试在颜色选择器中手动选取。

隐私保证所有计算与处理均在你的浏览器本地完成,输入数据不会上传服务器,也不会保存或共享。

选择 打开 +新窗口 esc关闭