渐变图片导出
将 CSS 渐变直接渲染为 PNG / SVG / JPG 图片下载 · 多种分辨率 · 无水印
渐变→PNG/SVG 下载
将 CSS 渐变直接渲染为 PNG / SVG / JPG 图片下载 · 多种分辨率 · 无水印
了解工具定位 · 使用场景 · 对比优势
选择颜色起点和终点,实时生成渐变 PNG 或 SVG,支持线性、径向两种渐变模式。设计师快速出配色方案、前端开发做页面占位图、运营做海报背景,无需打开设计软件。颜色和画布尺寸在浏览器内调整,所有渲染在本地完成,图片数据不上传服务器。
UI 设计师在 Figma 或 Sketch 中完成界面设计后,需要将渐变背景、按钮或图标等元素导出为独立资源。本工具支持直接从渐变参数生成 PNG 或 SVG 文件,无需在软件中手动截图或导出,避免压缩失真和背景杂色,确保设计稿交付时色彩准确、边缘清晰。
前端开发者在搭建落地页或品牌官网时,需要纯 CSS 无法完美复现的复杂渐变背景。使用本工具可以快速调整渐变角度、颜色节点和混合模式,实时预览效果后直接下载为 SVG 代码或 PNG 图片,节省手动编写 CSS 渐变代码的时间,同时保证跨浏览器渲染一致性。
移动端开发者在制作 App 启动页(Splash Screen)时,需要适配多分辨率设备的渐变背景图。本工具支持自定义渐变方向和颜色,导出高分辨率 PNG 后可直接用于 iOS 和 Android 项目,避免在 Sketch 中重复导出不同尺寸,减少素材管理成本。
数据分析师在制作图表时,常需要将渐变配色方案应用到柱状图、折线图或热力图中。本工具可快速生成指定色系的渐变条,导出为 SVG 后直接嵌入 ECharts 或 D3.js 的配置项中,确保图表配色与品牌视觉规范一致,提升报告的专业感。
视频创作者在制作教程或 Vlog 时,需要为字幕添加半透明渐变背景以提高可读性。使用本工具生成渐变 PNG 后导入剪辑软件(如 Premiere Pro 或 Final Cut Pro),作为字幕轨道底图,比手动在剪辑软件内绘制更高效,且能精确控制渐变颜色和透明度。
| 维度 | 本工具 | 竞品 A(Canva) | 传统方法(Photoshop) |
|---|---|---|---|
| 数据隐私 | 纯浏览器处理,图片不上传服务器 | 上传至云端服务器处理 | 本地文件处理,无上传 |
| 处理速度 | 即时生成,约 1 秒内 | 受网络和服务器负载影响,数秒 | 需手动操作,数分钟 |
| 离线可用 | 完全离线,依赖浏览器 | 需联网使用 | 需安装软件,可离线 |
| 操作门槛 | 无设计经验,输入颜色即可 | 需学习界面和拖拽操作 | 需掌握图层、渐变工具等专业功能 |
| 输出格式 | 直接下载 PNG 和 SVG | 导出 PNG 需付费,SVG 需手动操作 | 可导出多种格式,但步骤繁琐 |
| 收费模式 | 完全免费 | 免费版有水印,高级功能需订阅 | 需一次性购买或订阅 Creative Cloud |
| 注册要求 | 无需注册,打开即用 | 需要注册账号 | 需要 Adobe 账号激活 |
| 平台兼容 | 任何现代浏览器(桌面/移动) | 浏览器和移动 App | 仅桌面端(Windows/macOS) |
上手步骤 · 输入输出 · 避坑提示
| 输入 | 输出 | 说明 |
|---|---|---|
| linear, #ff0000, #0000ff | linear-gradient(180deg, #ff0000 0%, #0000ff 100%) | 典型场景:双色线性渐变,最常用配置 |
| radial, #ffffff, #000000, #333333 | radial-gradient(circle, #ffffff 0%, #000000 50%, #333333 100%) | 典型场景:三色径向渐变,模拟光照效果 |
| linear, #ff0000, #0000ff, #00ff00, #ffff00 | linear-gradient(180deg, #ff0000 0%, #0000ff 33%, #00ff00 66%, #ffff00 100%) | 边界 case:四色渐变,测试多色均匀分布 |
| linear, #fff, #000 | linear-gradient(180deg, #ffffff 0%, #000000 100%) | 边界 case:简写颜色代码(3位十六进制)自动补全 |
| linear, #123456, #abcdef | linear-gradient(180deg, #123456 0%, #abcdef 100%) | 典型场景:标准6位十六进制颜色代码 |
| radial, #ff0000, #00ff00, #0000ff, #ffff00, #ff00ff, #00ffff | radial-gradient(circle, #ff0000 0%, #00ff00 20%, #0000ff 40%, #ffff00 60%, #ff00ff 80%, #00ffff 100%) | 边界 case:六色渐变,测试工具对多色支持上限 |
| linear, #ff0000, #0000ff | linear-gradient(180deg, #ff0000 0%, #0000ff 100%) | 易错 case:用户可能忘记指定渐变类型,默认线性 |
FF0000, 00FF00#FF0000, #00FF00CSS 和 HTML 标准要求十六进制颜色值以 # 开头;不带 # 会被解析为数字或字符串,导致颜色不生效
线性渐变只给了 1 个颜色线性渐变至少需要 2 个颜色(如 #FF0000 到 #00FF00)单色渐变在数学上退化为纯色块,工具无法生成有过渡效果的渐变图
50, 5050%, 50%CSS 径向渐变的圆心坐标必须带 % 或 px 单位;纯数字会被当作无效值,默认回退到 center
在 sRGB 显示器上看正常,但印刷时颜色偏灰导出 PNG 时确认颜色模式为 sRGB,SVG 内嵌颜色用十六进制而非 named color浏览器默认使用 sRGB,但 SVG 中 named color(如 red)在不同渲染器下映射不同;十六进制保证跨平台一致
linear-gradient(45.5deg, #000, #fff)linear-gradient(45deg, #000, #fff) 或 46degCSS 渐变角度支持小数,但部分浏览器渲染时截断为整数,导致预览与导出不一致
linear-gradient(#000 80%, #fff 20%)linear-gradient(#000 20%, #fff 80%)CSS 渐变停点必须按从左到右(或从上到下)递增排列;逆序会导致浏览器忽略后面的停点
导出 PNG 后渐变边缘有白色锯齿导出前确认背景色为 transparent,且渐变两端颜色包含 alpha 值(如 rgba(255,0,0,0))PNG 支持透明通道,但若渐变端点颜色不透明,边缘会与工具默认背景色混合产生硬边
生成 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 色彩空间或非线性插值(如贝塞尔曲线),公式需调整。不支持多色渐变(需分段应用此公式)。
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 个高频疑问
「渐变生成」下的其他工具