在线渐变艺术生成器
开始使用 在线渐变艺术生成器
Gotokit所有工具可直接在线使用，无需下载，无需登录。
受 Art of the Gradient 启发的在线渐变艺术生成器，可视化调整图层并实时输出 CSS。
CSS 代码
关于这个工具
适用于海报、网页首屏和视觉背景设计的渐变艺术工具，通过图层、颜色和混合模式快速组合出高表现力背景，并可直接复制 CSS 投入项目。
- 导出高清 PNG / SVG，可继续编辑
- 内置多套配色主题，一键切换
- 支持浅色 / 深色画布
- 免费无水印，无次数限制
与通用制图方式对比
| 维度 | Gotokit 工具 | 常见替代方式 |
|---|---|---|
| 视觉方向 | 面向特定图法与风格快速出图 | 更通用，但前期配置更多 |
| 导出 | 更强调快速导出 PNG/SVG | 格式更多，但步骤更重 |
| 适合场景 | 汇报、专题页、社媒视觉 | 从零构建复杂分析图表 |
说明文档
这个工具基于 art-of-the-gradient 的思路，提供可视化的多图层渐变编辑界面。你无需写 CSS，就能通过颜色、位置、形状、混合模式等参数快速生成具有“艺术感”的背景效果。
与普通线性渐变不同，这个页面支持多个径向渐变图层叠加，更适合制作海报背景、品牌视觉素材、网页首屏背景和创意插画底纹。你可以一边拖动参数，一边实时预览结果，并直接复制最终 CSS 代码。
核心功能
- 三层渐变图层可独立编辑与启用/禁用
- 每层支持圆形/椭圆形、中心点、颜色与停靠点调整
- 全局支持背景色、混合模式、背景尺寸与偏移
- 一键随机生成风格化渐变
- 一键复制完整 CSS 代码，直接用于项目
使用步骤
- 先在全局区设置混合模式与背景色。
- 在每个图层中调整颜色、中心位置和渐变范围。
- 观察实时预览区，找到满意的视觉效果。
- 点击“随机生成”探索不同组合。
- 点击“复制 CSS”将代码粘贴到你的页面样式中。
适用场景
- 官网 Hero 区块背景设计
- 宣传图、海报、封面底纹制作
- 设计探索阶段的配色灵感草案
- 前端项目中快速生成可复用背景样式
注意事项
- 多层高饱和配色可能影响文字可读性，建议配合遮罩或调低透明感。
- 建议在深浅主题下分别测试背景效果，避免对比度不足。
- 若用于生产环境，请根据设计规范固定变量并进行跨浏览器测试。
最后验证时间：2026-05-10
源码出处：tone-row/art-of-the-gradient
常见问题
这个渐变生成器免费吗？
是的，完全免费，无需注册登录，没有使用次数限制，可以无限次生成渐变方案。
支持哪些渐变形状？
支持圆形（circle）、椭圆（ellipse）、线性（linear）、正方形（square）和圆锥（conic）五种渐变形状。
如何导出渐变？
可以一键复制生成的CSS radial-gradient代码，直接粘贴到项目中使用，无需下载任何文件。
可以随机生成吗？
支持，点击随机生成按钮，系统会自动组合颜色、位置和透明度参数，快速产出新的渐变方案。
渐变参数会被保存吗？
不会，所有参数调整和生成均在浏览器本地完成，关闭页面后数据即清除。
这个图表适合做汇报、论文还是社媒图片？
都适合，但重点不同。汇报更看重可读性，论文更看重结构与注释，社媒更看重风格和画面密度。建议根据场景调整配色、标签和导出尺寸。
这个工具和通用图表软件相比有什么区别？
这里的工具更偏向某一种版式或图表语法，打开即可直接得到风格明确的结果；通用图表软件适合从零搭建各种图，但配置和调整成本通常更高。
手机和平板上也能用吗？
大多数工具都支持现代移动浏览器，但复杂图表、大文件处理或精细拖拽类工具在桌面端体验通常更好。若你需要更高效率，建议优先使用电脑。
更多设计工具
设计工具全部工具环形证据网络图在线生成器
独立录入节点患者数和成对比较研究数，从 CSV 生成环形证据网络图。圆点面积表示患者规模，曲线粗细表示研究数量，支持深浅色模式及 PNG/SVG 导出，数据在浏览器本地处理，不执行统计分析。
潘通选色卡/拾色器
在线拾色并匹配最近潘通色号，支持 HEX/RGB 显示、复制与快速检索链接。
色轮取色器
基于 iro.js 的在线取色器，支持色轮交互、HEX/RGB/HSL/HSV 显示、复制与调色板管理。
界面配色方案生成器
基于 iro.js 色轮 + HSL 算法的配色方案生成器，提供 7 种配色规则（互补/类似/三角/分裂互补/四角/单色/正方形），支持实时 UI 组件预览与一键导出。
印刷品潘通色+CMYK+RGB配色工具
基于 iro.js + 150+ 潘通色卡的印刷品配色工具，支持 2-5 色组合、自动匹配潘通色号、CMYK 四色值实时计算与模拟铜版纸印刷预览。
在线弦图生成器 - 圆形彩色关系图
用圆形弦图读关系：节点排列成环，弧长即节点总流量，弦带的宽度与颜色把两两之间的流向强弱直接画出来。适合迁移、贸易、通话、引用等成对关系数据，三套配色主题，导出 PNG / SVG，全程本地处理。
雅致风格按日期分布环形气泡图
把全年事件按「月 + 日」投到同心日环上：月份在外圈、日期向内对齐，事件化作柔和的渐变气泡悬在对应的日期格上，密度与节日感一眼可见。雅致低饱和配色，支持浅色 / 深色底图与 PNG / SVG 导出。
双色渐变1维南丁格尔玫瑰图在线生成工具
每个花瓣由两种渐变色过渡晕染、呈环形对称展开的维南丁格尔玫瑰图生成器。中心可标注年份文字，支持浅色 / 深色底图与 PNG / SVG 导出，全程本地渲染。
海报风格两列桑基图在线生成工具
海报版两列桑基图：左侧节点逐个涂上明快的彩色，右侧节点按权重压出深浅灰阶，每条流带里直接标名称、数值与占比，版面平整适合直接当海报主视觉。支持浅色 / 深色底图与 PNG / SVG 导出。
在线河流图生成器 - 多层平滑堆叠流图工具
平滑河流图（Streamgraph）：多条序列围绕一条随年份摆动的零基线上下对称堆叠，层与层之间平滑起伏如河流改道，适合把多组成部分随时间的变化叠在一起比较总量与份额。2-16 个系列、3-40 行，支持浅色 / 深色底图与 PNG / SVG 导出。
莫兰迪配色在线河流图生成工具 - 蓝粉渐变流图
莫兰迪蓝粉配色的河流图（Streamgraph / ThemeRiver）：低饱和的蓝、灰蓝、藕粉让叠层河流安静不刺眼，层与层之间留出细白缝、顶部横排图例对号入座。适合既要叠层看趋势、又要温和高级配色出图的场景，支持浅色 / 深色底图与 PNG / SVG 导出。
连续误差带图在线生成工具 - 置信区间带图表
连续误差带图：主线之下不画固定的阴影条，而是一条逐点变宽的贴身误差带，波动大的时段带子自然鼓起、平稳的时段收窄，把「趋势」与「不确定」叠在同一张图里。经典米白、彩虹、莫兰迪三套配色，浅色 / 深色底图，PNG / SVG 导出。
曲线茎线条气泡图在线生成工具 - 对数轴棒棒糖气泡图
茎线气泡图（Line Bubble Chart）：事件沿时间轴排列，一条细茎从底脊向右微微弯起、顶端顶起半透明气泡，Y 轴采用对数刻度让 0.7 与 14 这样跨数量级的值同框比较，气泡大小按平方根映射数值。五类配色、浅色 / 深色底图、PNG / SVG 导出，适合历史时间线与灾难 / 事件数据。
有机融合气泡枝干图在线生成工具 - Morph 分区气泡图生成器
有机融合气泡枝干图（Morph Bubble Zoning Diagram）：子节点不再悬空，而是与所属中心节点像油滴聚并一样被 Metaball 曲面熔接，标签沿节点外缘圆弧排列，节点之间用虚线相连，青绿蓝四色和谐。适合表达「中心 - 成员」聚落结构，支持浅色 / 深色底图与 PNG / SVG 导出。
在线扇贝弦图生成工具 - 双分区引用弦图生成器
扇贝形双分区弦图：下方分组弧按总流量加权成不等宽扇贝，上方目标节点以等宽弧扇面排开，两侧之间的流量化作细缎带沿过圆心的贝塞尔曲线弯曲相连，节点标签沿径向排版不乱。适合「少数分组 → 大量目标」的二分关系数据，支持浅色 / 深色底图与 PNG / SVG 导出。
表格型热力图在线生成工具 - 带数值标注的矩阵热力图
矩阵热力图的“数字版”：每个单元格既着色又直接印出数值，发散色带以 0 为界向正负两端渐变，右侧竖条色标自带刻度，适合看正负不对称与离群格。经典、彩虹、莫兰迪三套配色，浅色 / 深色底图，PNG / SVG 导出。
带误差棒分组柱状图在线生成工具 - 双系列学术柱形图
学术图表风的带误差棒分组柱状图：双系列浅色柱体并排、黑色 I 形误差棒钉在柱顶、全框轴线加 45° 斜排的 x 轴标签，直接复刻论文配图的克制版式。适合实验组间测量对比，支持浅色 / 深色底图与 PNG / SVG 导出。
山峦图在线生成工具 - 纵向分层多重面积图生成器
山峦图（Ridgeline / Joy Plot）：把多个分布沿各自独立水平基线层层排开，山形平滑起伏、互不遮挡，左侧逐行标注系列名、底部圆点图例收尾，多组分布的峰值与离散度并排比较。支持 6 个系列以内、最多 400 行，浅色 / 深色底图与 PNG / SVG 导出。
径向堆叠条形图在线生成工具 - 环形赛道图生成器
径向堆叠条形图（Racetrack / Circular Bar Plot）：每一行数据化作一条同心圆环，环长按堆叠类目分成弧段、每段与总值成比例，像一圈圈赛车跑道标注着年度构成。环末端以斜体标出整环总值，右侧竖排方形图例对色。支持浅色 / 深色底图与 PNG / SVG 导出。
弧形扇面叙事桑基图在线生成工具
复刻截图中的左侧扇形来源、中央倾斜事件条与右侧角色弧线，按影响力线宽生成叙事型桑基图，支持 CSV、PNG 与 SVG。
对数坐标气泡散点图在线生成工具
上传 CSV 生成双对数坐标气泡散点图：气泡大小编码第三维、按分组自动配色，自动叠加 y=x 对角参考虚线与 R² / P / n 统计注释，支持深浅色与 PNG / SVG 导出。
五列淡彩渐变桑基图在线生成工具
五阶段桑基图，把「来源 → 中转 → 分拨 → 渠道 → 终端」的逐级分流一次画完：每个节点独立淡彩配色，流带沿流向做「源色 → 目标色」渐变并半透明叠印，细窄节点配内层白底药丸标签。三套柔和配色、浅色 / 深色底图与 PNG / SVG 导出。
双色对冲收支流桑基图在线生成工具
基于 ECharts 标准桑基布局的左→右分层双色收支桑基图：收入侧青色自左侧一层层汇入，越过中央那根青转品的枢纽竖条后，支出侧以品红向右逐级发散去。同族按节点吞吐量排名映射七档明暗，色越深、带越粗代表金额越大，细成一条线的浅色细带是占比极小的科目；标签按列分级并自动避让。三套双色方案、浅色 / 深色底图与 PNG / SVG 导出。
能源流向桑基图在线生成工具
自由深度的能源流向桑基图，把「能源来源 → 转换载体 → 终端用途」的逐级流动一次画完：每个节点独立大地色配色，流带沿流向做「源色 → 目标色」渐变并以约 0.2 极低不透明度叠印，所有节点标签统一置于竖条右侧且无底色遮挡。三套配色、浅色 / 深色底图与 PNG / SVG 导出。
代谢物通路富集桑基图在线生成工具
把「代谢物 → 通路」的两列富集桑基图与右侧富集气泡面板一次画完：流带统一浅灰色并以约 0.6 半透明度叠印，交叠处自然加深；所有节点标签统一置于竖条左侧、右对齐并垂直居中对齐，不带药丸底色遮挡流带；左列约 50 个代谢物取淡彩多色相、右列通路取宝石大地色；气泡面板与通路逐行对齐，x 为 -Log(Pvalue)、面积映射 Count、红色深浅映射 Hit Ratio。支持浅色 / 深色底图与 PNG / SVG 导出。
四列分阶段裁决桑基图在线生成工具
四阶段决策桑基图，把「来源 → 目的地 → 裁决结果 → 按来源分解」的漏斗一次画完：总量从左侧分层流入，右侧按来源拆出被接受与拒绝的对比条，附年份徽章与三套配色，适合审稿、审批、招生等决策流数据。支持深浅色底图与 PNG / SVG 导出。
三列影响力流向桑基图在线生成工具
把「情境类型 → 场景 → 角色」三段串成一张影响力流向图：流带粗细直接等于数值大小，越粗的场景对结局影响越大。右列节点颜色自动继承其最大来源分类，底部图例直接读取你 CSV 里的节点名，换成自己的数据即刻改头换面。附图内标题与说明文字，支持浅色 / 深色底图与 PNG / SVG 导出。
三角阶梯式分布矩阵热图在线生成工具
把「每个类别落在各数值区间多少天」的频率矩阵排成阶梯式三角形热图：颜色即频次深浅，四分位区间自动框出、中位数圆点与均值叉号自动叠加，一眼看到整组分布的形态与离散。3 套配色、浅色 / 深色底图与 PNG / SVG 导出。
冷暖撞色渐变彩带连线弦图生成工具
Circos 风格冷暖撞色弦图：暖色节点与冷色节点各自连成连续弧段，节点之间的连线渲染成从一端暖色渐变到另一端冷色的双色丝带，阵营流动一眼分明。适合基因、网络、生态等成对矩阵数据，支持深色模式与 PNG / SVG 导出。
圆形气泡弦图在线生成工具
气泡弦图把成对关系数据摆上一个大圆：每个节点是一颗气泡，气泡越大代表节点规模越大，颜色沿青蓝连续色带由浅到深代表强度越高；节点间的弦线以向心曲线相连，粗细代表关系强弱，节点名沿大圆外侧辐射排布。适合科研合作网络、供应链依赖、部门往来等「关系 + 节点指标」场景，30 个节点左右依然清爽，支持深色模式与 PNG / SVG 导出。
径向弧形流向图在线生成工具
径向弧形流向图：把「国家 → 组织」的流向摆在同心布局里，上方拱形弧按大洲分段、国家刻度沿弧排布，流线从刻度出发向下收束到按总流量缩放的组织节点。适合全球贸易、援助、移民等流向叙事，支持深色模式与 PNG / SVG 导出。
双色半环二分流向弦图在线生成工具
双色半环二分流向弦图：把「源 → 目标」的二分流向摆在双层半环上——上环 slate 蓝灰源扇区、下环粉红目标扇区，节点宽度按总流量加权，贝塞尔流线穿心直指目标并带方向箭头。适合威胁建模、能力映射、需求追溯等两组角色关系，支持深色模式与 PNG / SVG 导出。
双扇形彩色弦图生成工具
双扇形彩色弦图把二分流量摆成沙漏：顶部五个实色扇区、底部五个同色系浅色扇区各自沿同一圆弧展开成对置扇形，3 点与 9 点方向留出开口；半透明彩色弦带穿过中心收腰相连，每个扇区自带 0 起的刻度轴（主刻度每 10 单位）。适合渠道流转、成本分摊、需求覆盖等两组角色的矩阵数据，支持深浅色与 PNG / SVG 导出。
Circos 共线性弦图
Circos 共线性弦图不是把节点当离散分类，而是把圆环分段当作带一维坐标的连续轨道：外侧刻度显示区间位置，中心细曲线表示“这一段区间对应那一段区间”的映射 / 共线性关系。适合基因组共线性、块迁移、地址区间映射、批次重组与地层对比，支持深浅色与 PNG / SVG 导出。
分组流向弦图在线生成工具
把「很多来源汇入少数分组」画成一个圆环：左半圈的小弧是各个来源（统一紫色），右半圈的大弧是分组（每组一色，配右侧竖排图例），弧宽等于节点总量，中间彩带按目标分组着色。分组弧内还有白色分隔线，一眼看清每组由几个来源构成。适合样本归类、渠道归因、主题归属与批次去向，支持深浅色与 PNG / SVG 导出。
光谱编号弦图在线生成工具
把两两关系矩阵画成一个光谱圆环：节点按总量从大到小顺时针排列，弧色沿连续色带采样，色相即排名（最红最大、最蓝最小）；每条关系是等宽青绿细线，从两端弧段中点向圆心收拢并交叉，弧内白色分隔线即该节点的连接清单，中心另有半透明粉色圆环。支持深浅色与 PNG / SVG 导出。
弧线图在线生成工具
经典弧线图（Arc Diagram）：把共现关系压到一条水平基线上，带分组的彩色刻度块贴线排列、竖排分组色标在左侧，关系强度由上方半圆弧线的粗细与高低表达，最多 400 条关系依然清爽。适合时序叙事与关系对排序，支持深色模式与 PNG / SVG 导出。
分组配色玫瑰图在线生成工具
按分组给每一瓣着色、组与组之间色相自然衔接的南丁格尔玫瑰图生成器。把类别、数值与分组拖成 CSV 即可排版出整环花图，支持标签开关、浅色 / 深色底图与 PNG / SVG 导出。
Excalidraw 在线白板
基于 Excalidraw 的在线手绘白板，支持流程图、草图、线框图与图形标注，浏览器本地编辑并可导出 PNG、SVG 与 .excalidraw 文件。