渐变图导出

渐变→PNG/SVG 下载

412 次访问
GRADIENT → PNG / SVG / JPG

渐变图片导出

将 CSS 渐变直接渲染为 PNG / SVG / JPG 图片下载 · 多种分辨率 · 无水印

渐变预览

配置

135°

色标

导出尺寸

桌面壁纸
1920×1080
4K
3840×2160
手机壁纸
1080×1920
iPhone 15
1170×2532
方形
1080×1080
Twitter 头图
1500×500
OG 图
1200×630
2K
2560×1440
×

关于本工具

了解工具定位 · 使用场景 · 对比优势

选择颜色起点和终点,实时生成渐变 PNG 或 SVG,支持线性、径向两种渐变模式。设计师快速出配色方案、前端开发做页面占位图、运营做海报背景,无需打开设计软件。颜色和画布尺寸在浏览器内调整,所有渲染在本地完成,图片数据不上传服务器。

使用场景

🎨

UI 设计稿导出

UI 设计师在 Figma 或 Sketch 中完成界面设计后,需要将渐变背景、按钮或图标等元素导出为独立资源。本工具支持直接从渐变参数生成 PNG 或 SVG 文件,无需在软件中手动截图或导出,避免压缩失真和背景杂色,确保设计稿交付时色彩准确、边缘清晰。

🖥️

网页背景生成

前端开发者在搭建落地页或品牌官网时,需要纯 CSS 无法完美复现的复杂渐变背景。使用本工具可以快速调整渐变角度、颜色节点和混合模式,实时预览效果后直接下载为 SVG 代码或 PNG 图片,节省手动编写 CSS 渐变代码的时间,同时保证跨浏览器渲染一致性。

📱

App 启动图制作

移动端开发者在制作 App 启动页(Splash Screen)时,需要适配多分辨率设备的渐变背景图。本工具支持自定义渐变方向和颜色,导出高分辨率 PNG 后可直接用于 iOS 和 Android 项目,避免在 Sketch 中重复导出不同尺寸,减少素材管理成本。

📊

数据可视化配色

数据分析师在制作图表时,常需要将渐变配色方案应用到柱状图、折线图或热力图中。本工具可快速生成指定色系的渐变条,导出为 SVG 后直接嵌入 ECharts 或 D3.js 的配置项中,确保图表配色与品牌视觉规范一致,提升报告的专业感。

🎬

视频字幕背景

视频创作者在制作教程或 Vlog 时,需要为字幕添加半透明渐变背景以提高可读性。使用本工具生成渐变 PNG 后导入剪辑软件(如 Premiere Pro 或 Final Cut Pro),作为字幕轨道底图,比手动在剪辑软件内绘制更高效,且能精确控制渐变颜色和透明度。

对比矩阵本工具 vs 竞品 vs 传统方法

维度本工具竞品 A(Canva)传统方法(Photoshop)
数据隐私纯浏览器处理,图片不上传服务器上传至云端服务器处理本地文件处理,无上传
处理速度即时生成,约 1 秒内受网络和服务器负载影响,数秒需手动操作,数分钟
离线可用完全离线,依赖浏览器需联网使用需安装软件,可离线
操作门槛无设计经验,输入颜色即可需学习界面和拖拽操作需掌握图层、渐变工具等专业功能
输出格式直接下载 PNG 和 SVG导出 PNG 需付费,SVG 需手动操作可导出多种格式,但步骤繁琐
收费模式完全免费免费版有水印,高级功能需订阅需一次性购买或订阅 Creative Cloud
注册要求无需注册,打开即用需要注册账号需要 Adobe 账号激活
平台兼容任何现代浏览器(桌面/移动)浏览器和移动 App仅桌面端(Windows/macOS)

使用指南

上手步骤 · 输入输出 · 避坑提示

使用步骤

  1. 在颜色 1 和颜色 2 输入框中分别选择起始色与结束色(支持十六进制或取色器)
  2. 点击「方向」按钮切换渐变角度(水平 / 垂直 / 对角线)
  3. 点击「导出 PNG」或「导出 SVG」按钮生成渐变图像
  4. 在预览区确认效果后,点击「下载」保存到本地

输入输出示例7 个典型场景,覆盖常规、边界与易错

输入输出说明
linear, #ff0000, #0000fflinear-gradient(180deg, #ff0000 0%, #0000ff 100%)典型场景:双色线性渐变,最常用配置
radial, #ffffff, #000000, #333333radial-gradient(circle, #ffffff 0%, #000000 50%, #333333 100%)典型场景:三色径向渐变,模拟光照效果
linear, #ff0000, #0000ff, #00ff00, #ffff00linear-gradient(180deg, #ff0000 0%, #0000ff 33%, #00ff00 66%, #ffff00 100%)边界 case:四色渐变,测试多色均匀分布
linear, #fff, #000linear-gradient(180deg, #ffffff 0%, #000000 100%)边界 case:简写颜色代码(3位十六进制)自动补全
linear, #123456, #abcdeflinear-gradient(180deg, #123456 0%, #abcdef 100%)典型场景:标准6位十六进制颜色代码
radial, #ff0000, #00ff00, #0000ff, #ffff00, #ff00ff, #00ffffradial-gradient(circle, #ff0000 0%, #00ff00 20%, #0000ff 40%, #ffff00 60%, #ff00ff 80%, #00ffff 100%)边界 case:六色渐变,测试工具对多色支持上限
linear, #ff0000, #0000fflinear-gradient(180deg, #ff0000 0%, #0000ff 100%)易错 case:用户可能忘记指定渐变类型,默认线性

常见错误对照8 个常踩的坑 · 错误 → 修复

1. 颜色代码不带 # 号

错误
FF0000, 00FF00
修复
#FF0000, #00FF00

CSS 和 HTML 标准要求十六进制颜色值以 # 开头;不带 # 会被解析为数字或字符串,导致颜色不生效

2. 颜色数量与渐变方向不匹配

错误
线性渐变只给了 1 个颜色
修复
线性渐变至少需要 2 个颜色(如 #FF0000 到 #00FF00)

单色渐变在数学上退化为纯色块,工具无法生成有过渡效果的渐变图

3. 径向渐变把圆心坐标写成百分比但忘了单位

错误
50, 50
修复
50%, 50%

CSS 径向渐变的圆心坐标必须带 % 或 px 单位;纯数字会被当作无效值,默认回退到 center

4. SVG 导出后颜色空间不对

错误
在 sRGB 显示器上看正常,但印刷时颜色偏灰
修复
导出 PNG 时确认颜色模式为 sRGB,SVG 内嵌颜色用十六进制而非 named color

浏览器默认使用 sRGB,但 SVG 中 named color(如 red)在不同渲染器下映射不同;十六进制保证跨平台一致

5. 渐变角度用了小数但没考虑浏览器四舍五入

错误
linear-gradient(45.5deg, #000, #fff)
修复
linear-gradient(45deg, #000, #fff) 或 46deg

CSS 渐变角度支持小数,但部分浏览器渲染时截断为整数,导致预览与导出不一致

6. 把渐变色停点写在了顺序之外

错误
linear-gradient(#000 80%, #fff 20%)
修复
linear-gradient(#000 20%, #fff 80%)

CSS 渐变停点必须按从左到右(或从上到下)递增排列;逆序会导致浏览器忽略后面的停点

7. PNG 导出时选了透明背景但没检查 Alpha 通道

错误
导出 PNG 后渐变边缘有白色锯齿
修复
导出前确认背景色为 transparent,且渐变两端颜色包含 alpha 值(如 rgba(255,0,0,0))

PNG 支持透明通道,但若渐变端点颜色不透明,边缘会与工具默认背景色混合产生硬边

8. 把渐变图当纹理直接拉伸到超大尺寸

错误
生成 100x100 的渐变图,然后在 CSS 中 background-size: 2000px 2000px
修复
按实际展示尺寸生成渐变图(如 2000x2000),或使用 CSS 渐变而非位图

小图拉伸后像素块明显,渐变平滑度丢失;工具生成的位图应匹配最终显示分辨率

工作原理

公式推导 · 流程图解 · 依据出处

核心公式

C(t) = (1 - t) × C0 + t × C1, t ∈ [0, 1]

变量说明

  • C(t) — t 位置处的插值颜色(RGBA 四通道)
  • C0 — 渐变起始颜色(RGBA 四通道)
  • C1 — 渐变结束颜色(RGBA 四通道)
  • t — 归一化位置,0 为起点,1 为终点

示例

从 #FF0000 (红) 渐变到 #0000FF (蓝),在 t=0.5 处:R = (1-0.5)×255 + 0.5×0 = 127.5,G = (1-0.5)×0 + 0.5×0 = 0,B = (1-0.5)×0 + 0.5×255 = 127.5,A = 255。得到颜色 #7F007FFF(半程紫蓝色)。

适用范围

适用于线性 RGB 空间下的双色线性渐变。若使用 HSL/HSV 色彩空间或非线性插值(如贝塞尔曲线),公式需调整。不支持多色渐变(需分段应用此公式)。

原理图

选择渐变颜色 / 方向 / 类型实时渲染Canvas / CSS 预览导出文件PNG / SVG 下载全部在浏览器内完成无需上传到服务器无隐私泄露风险离线也可使用
用户输入 本地处理 输出结果

开发者集成

3 种主流语言 · 复制即用

from PIL import Image, ImageDraw

# 创建 400x200 的渐变图像(水平方向:红→蓝)
width, height = 400, 200
img = Image.new('RGB', (width, height))
draw = ImageDraw.Draw(img)

for x in range(width):
    # 计算该列颜色:红色分量递减,蓝色分量递增
    r = int(255 * (1 - x / width))
    b = int(255 * (x / width))
    color = (r, 0, b)
    draw.line([(x, 0), (x, height)], fill=color)

img.save('gradient.png')
print('已生成 gradient.png')
package main

import (
	"image"
	"image/color"
	"image/png"
	"os"
)

func main() {
	width, height := 400, 200
	img := image.NewRGBA(image.Rect(0, 0, width, height))

	for x := 0; x < width; x++ {
		// 水平渐变:红→蓝
		r := uint8(255 * (1 - float64(x)/float64(width)))
		b := uint8(255 * float64(x) / float64(width))
		for y := 0; y < height; y++ {
			img.Set(x, y, color.RGBA{r, 0, b, 255})
		}
	}

	f, _ := os.Create("gradient.png")
	defer f.Close()
	png.Encode(f, img)
}
const { createCanvas } = require('canvas');
const fs = require('fs');

const width = 400;
const height = 200;
const canvas = createCanvas(width, height);
const ctx = canvas.getContext('2d');

// 水平渐变:红→蓝
const gradient = ctx.createLinearGradient(0, 0, width, 0);
gradient.addColorStop(0, 'rgb(255, 0, 0)');
gradient.addColorStop(1, 'rgb(0, 0, 255)');

ctx.fillStyle = gradient;
ctx.fillRect(0, 0, width, height);

const buffer = canvas.toBuffer('image/png');
fs.writeFileSync('gradient.png', buffer);
console.log('已生成 gradient.png');

常见问题

8 个高频疑问

怎么把渐变色导出成 PNG 或 SVG?操作步骤是什么?
在页面上选择或自定义起始色和结束色,支持色盘取色或直接输入十六进制色值。调整渐变方向(水平 / 垂直 / 角度)后,下方会实时预览效果。确认渐变效果后,点击「下载 PNG」或「下载 SVG」按钮即可保存到本地。PNG 是位图,适合直接用在图片或背景中;SVG 是矢量图,支持无损缩放,适合网页或印刷设计。
为什么我导出的 PNG 和 SVG 看起来颜色不一样?
PNG 是位图格式,颜色渲染依赖显示器的色彩管理(sRGB 色域),不同设备或浏览器解码时可能有轻微色差。SVG 是矢量格式,颜色以 CSS 或 XML 属性存储,理论上更精确。如果颜色差异明显,检查是否系统开启了「夜览模式」或显示器色温有偏移。建议在 Chrome 或 Edge 浏览器中操作,并关闭色彩滤镜。
支持导出渐变的透明度(透明背景)吗?
支持。在颜色选择时,可以调整颜色的透明度(Alpha 通道),起始色和结束色都支持从 0%(完全透明)到 100%(完全不透明)。导出 PNG 时,透明背景会保留为 Alpha 通道;导出 SVG 时,透明部分会以 rgba() 或 opacity 属性表示。注意:如果导出 SVG 后在其他软件中打开时透明区域显示为白色,通常不是工具的问题,而是该软件不支持透明背景解析。
可以自定义渐变的颜色数量吗?比如三色渐变或更多?
当前版本仅支持双色线性渐变(起始色 + 结束色)。如果需要多色渐变或径向渐变,建议先在此工具中导出双色渐变作为基础素材,再在 Photoshop、Figma、Canva 等设计软件中添加更多色标。本工具定位是快速生成最常用的双色渐变,适合 UI 背景、按钮、图表填充等场景。
导出的 SVG 文件在 Word 或 PowerPoint 里打开后渐变丢失了,怎么回事?
Microsoft Office 对 SVG 中 `<linearGradient>` 标签的支持不完整,尤其是角度渐变或复杂坐标时可能降级为纯色。解决方法:在导出 SVG 时,如果打算在 Office 中使用,建议勾选「水平」或「垂直」渐变方向(避免使用自定义角度);如果仍不行,可以改用 PNG 格式插入,Office 对 PNG 的兼容性最好。
这个工具是纯前端运行的吗?会不会把我的配色方案上传到服务器?
完全纯前端运行。渐变颜色的选择、预览和导出全部在浏览器内通过 JavaScript 和 Canvas API 完成,没有任何数据发送到服务器。可以断网后打开页面测试,所有功能依然可用。配色方案仅保存在本地内存,关闭页面或刷新即丢失,不会留下任何痕迹。
导出 PNG 时能设置图片尺寸吗?最大支持多大?
可以。在导出 PNG 前,有宽度和高度输入框,默认值为 800×600 像素。支持自定义尺寸,最大宽度和高度均不超过 8192 像素(超出后浏览器 Canvas 可能因内存限制报错或导出空白图片)。如果需要超大尺寸的渐变图(如海报背景),建议先导出 SVG 矢量格式,再在专业软件中按需缩放为任意尺寸。
为什么我调整角度后预览和导出的渐变方向不一样?
角度值以「水平向右为 0°,逆时针递增」的标准 CSS 角度系统计算。预览中的角度是实时渲染的,导出时也使用同一套角度公式。如果发现预览和导出不一致,检查是否在导出前修改了角度后没有重新点击预览区域(部分浏览器需要手动触发重绘)。建议先将角度设为 0° 或 90° 测试,确认基础方向无误后再调为自定义角度。
选择 打开 +新窗口 esc关闭