跳到主要内容

渐变网格生成器:4-12 控制点拖拽, 一键导 SVG / PNG / CSS

渐变网格生成器, 4-12 个控制点双线性混合, 输出 SVG / PNG / CSS 多重 radial-gradient 兜底 (旧浏览器), 一键随机出 marketing 级背景图。

  • 本地处理
  • 分类 生成器
  • 适合 从空白开始,先拿到一版可修改的结果。
模糊 / 柔化30
控制点 (6/12)
#10,0
#2100,0
#30,100
#4100,100
#533,50
#666,50
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 450" width="800" height="450"><defs><radialGradient id="mg0" cx="0.0" cy="0.0" r="440.0" gradientUnits="userSpaceOnUse"><stop offset="0%" stop-color="#8b5cf6" stop-opacity="0.95"/><stop offset="100%" stop-color="#8b5cf6" stop-opacity="0"/></radialGradient><radialGradient id="mg1" cx="800.0" cy="0.0" r="440.0" gradientUnits="userSpaceOnUse"><stop offset="0%" stop-color="#06e6d7" stop-opacity="0.95"/><stop offset="100%" stop-color="#06e6d7" stop-opacity="0"/></radialGradient><radialGradient id="mg2" cx="0.0" cy="450.0" r="440.0" gradientUnits="userSpaceOnUse"><stop offset="0%" stop-color="#ff4dd2" stop-opacity="0.95"/><stop offset="100%" stop-color="#ff4dd2" stop-opacity="0"/></radialGradient><radialGradient id="mg3" cx="800.0" cy="450.0" r="440.0" gradientUnits="userSpaceOnUse"><stop offset="0%" stop-color="#ffe27a" stop-opacity="0.95"/><stop offset="100%" stop-color="#ffe27a" stop-opacity="0"/></radialGradient><radialGradient id="mg4" cx="264.0" cy="225.0" r="440.0" gradientUnits="userSpaceOnUse"><stop offset="0%" stop-color="#a78bfa" stop-opacity="0.95"/><stop offset="100%" stop-color="#a78bfa" stop-opacity="0"/></radialGradient><radialGradient id="mg5" cx="528.0" cy="225.0" r="440.0" gradientUnits="userSpaceOnUse"><stop offset="0%" stop-color="#22d3ee" stop-opacity="0.95"/><stop offset="100%" stop-color="#22d3ee" stop-opacity="0"/></radialGradient><filter id="b"><feGaussianBlur stdDeviation="36.0"/></filter></defs><g filter="url(#b)"><rect width="800" height="450" fill="#8b5cf6"/><rect width="800" height="450" fill="url(#mg0)"/><rect width="800" height="450" fill="url(#mg1)"/><rect width="800" height="450" fill="url(#mg2)"/><rect width="800" height="450" fill="url(#mg3)"/><rect width="800" height="450" fill="url(#mg4)"/><rect width="800" height="450" fill="url(#mg5)"/></g></svg>

这个工具能做什么

一个真正的 mesh gradient (网格渐变) 生成器, 不是三个 radial 叠一叠就 叫 mesh。打开就给你 6 个控制点 (4 个角 + 2 个中点), 用鼠标或手指拖 任意一个改位置, 一共可以加到 12 个, 每动一下背景就用真双线性插值 (bilinear) 重新算一次。两种渲染模式: SVG (多个软边缘 radial-gradient 叠加, 体积 ~15 KB, Figma 打开后每个 blob 都能单独编辑) 和 Canvas (逐像素双线性插值, 速度慢一点但更细腻, 可以导 2x 高清 PNG, 最大 3200×2400)。20 套预设覆盖团队真正会用的氛围: 极光 / 夕阳 / 海洋 / 赛博朋克 / 莫兰迪 / 活力 / 柔和 / 暗黑, 加 4 套自家品牌色。"随机" 按钮在 OKLCH 色空间 (感知均匀, CSS Color Level 4 支持) 撒 6 个点, 落在饱和度和亮度都安全的区间, 所以每次随机出来都像设计师挑的, 不 会出 "纯荧光绿 + 黑" 这种废色。画布比例支持 16:9 (Hero 区) / 1:1 (社交方图) / 9:16 (手机壁纸 / Story) / 21:9 (超宽 banner) 一键切。 导出: SVG 单文件 / PNG 2x / CSS 多 radial-gradient (兜底, 不支持 SVG 背景的老环境用) / Figma 可粘贴的 JSON (描述每个控制点)。整个 过程在你浏览器本地完成, 不上传, 不发 analytics, 服务器永远不知道 你设计的颜色是什么。

工具细节

输入
文件 + 文本 + 数值
页面会根据工具类型展示文本框、数值控件、文件选择或结构化输入。
输出
即时结果 + 复制 + 下载
结果区优先给出可操作结果，支持项会显示复制、下载或可视化预览。
隐私
浏览器本地处理
主工具逻辑未发现外部 API 调用，输入通常留在当前标签页内处理。
保存 / 分享
可分享链接状态
关键设置会进入 URL，复制链接后别人能复现同一组参数。
性能预算
首屏 JS ≤ 28 KB
没有声明 WASM 依赖，适合快速打开和移动端使用。
适用场景
生成器 · 设计师
分类和职业标签用于推荐相关工具、组织内链，并帮助用户快速判断是否适合当前任务。

怎么用

  1. 1. 输入

    把内容粘贴或拖入工具面板。

  2. 2. 处理

    点击按钮,在浏览器内本地处理,文件不上传。

  3. 3. 复制 / 下载

    一键复制结果或下载到本地。

渐变网格生成器 适合怎么用

适合快速生成初稿、起步素材或结构化结果,再人工整理后发布。

适合生成任务

  • 从空白开始,先拿到一版可修改的结果。
  • 生成可重复使用的草稿、名称、模板或占位素材。
  • 先探索多个选项,再挑最适合当前任务的。

生成检查项

  • 生成内容发给客户、上页面或进文档前,必须人工看过。
  • 有品牌语气、格式或受众要求时,不要沿用默认值。
  • 只保留真正符合任务的部分。

下一步可以接着做

这些入口会把当前任务接到更完整的工具链里。

  1. 1 SVG 波浪分隔生成器 为落地页生成平滑的 SVG 波浪分隔,波浪数 / 振幅 / 层数 / 种子可调,上下翻转,导出 SVG 与 CSS,浏览器本地 打开
  2. 2 CSS 渐变生成器 可视化 CSS 渐变生成器:线性 / 径向 / 圆锥 / 多色断点,实时预览,一键复制 CSS,导出 PNG。 打开
  3. 3 毛玻璃 CSS 生成器 毛玻璃 CSS 生成器, backdrop-filter 模糊 + 透明度 + 描边一站调, 含 8 套真实背景预览, 一键复制 CSS / Tailwind / SwiftUI 代码。 打开

真实使用场景

  • 两分钟做一张 SaaS 落地页 Hero 背景

    落地页要那种 Stripe / Linear / Vercel 的 "软发光 mesh" 质感。 打开工具, 点 "极光" 预设, 把左上角控制点往中心拖, 让紫色顶到 标题区, 把右下角的点拖出画布外, 让青色从边缘溢出去。切到 Canvas 模式, 导出 2x PNG, 贴在 Hero 区背后。从 "没有设计稿" 到背景上线, 不到 120 秒, 不开 Figma 不开 PS。

  • 一次性出 20 张博客 OG / Twitter 卡背景

    要发 20 篇博客文章, 每张 OG 图既要互相 "看起来是一家的", 又 不能完全一样。比例切到 1.91:1 (接近 Twitter 1200×630), 连按 20 次 "随机", PNG 导出看顺眼的那些。因为随机用的是 OKLCH 撒点, 每张都是品牌安全的配色, 不是 "荧光面条", 留下来的概率从 3/20 变成 15/20。

  • 给低年级设计师交一张品牌色对齐的 mesh 让他往下调

    品牌色是 #ff4dd2 / #06e6d7 / #8b5cf6, 在 6 个控制点里固定 3 个 用品牌色, 另外 3 个在它们周围的 OKLCH 窄带里随机一下, 导 SVG, 扔进共享 Figma 库。新人拿到的是一张 "已经是品牌色" 的 起手 mesh, 只需要调位置, 不用再纠结 "这个紫到底像不像品牌 紫"。

  • 替换内部 dashboard 上那张过时的 stock photo

    后台的空状态原本配了一张商业图库的照片, 上线两个月就过时了。 用 "莫兰迪" 预设做一张柔和 mesh, 导 SVG, 当 "暂无数据" 文案 后面的装饰背景。整页气质瞬间正回来, 也不用专门找插画师。

  • 上线前测一下 mesh 上能不能放正文

    想在 mesh 上放正文文字, 不只是装饰大标题。把模糊滑块拉到 80 抹平色相, 选 "柔和" 类预设, 然后在组件里给正文叠一块半透明 深色面板。这样可以拿这块面板算 WCAG 对比度, 而不是骗自己 直接对 mesh 算 (那肯定过不了, 工具的 FAQ 也老实承认这点)。

  • 做一张 9:16 竖版 TikTok / 视频号背景

    创作者团队要做手机竖屏教程, 想要一个 "软发光" 背景。比例切到 9:16, 选 "日落" 预设, 把暖色控制点往上拖, 让高光正好在主播 头部后面, 导 PNG 2x (1080×1920)。竖版导出和横版用的是同一 套 mesh, 不是另调的版本, 所以横版 Hero 和竖版短视频的品牌 质感是一致的。

常见踩坑

  • 一上来就加满 12 个控制点, 最后所有颜色糊成一片棕色泥巴。先用 6 个, 等某个区域确实需要更多层次, 再加第 7、第 8 个。

  • 按 "随机" 之后直接导出, 忘了先切画布比例。随机不会改比例, 你想要 9:16 结果导出来还是 16:9。先切比例, 再随机。

  • 用 SVG 模式然后期待结果和 Canvas 模式一模一样。SVG 是 radial 加法叠加, Canvas 是真双线性插值。想要 "这一像素都准" 的效果, 用 Canvas 导 PNG, 不是 SVG。

  • 把正文直接放在 mesh 上, 然后 WCAG 对比度过不了。mesh gradient 是装饰用的, 想放正文请叠半透明文字面板, 或者选 "柔和" 类预设把模糊拉高。

  • 不学色彩理论, 12 个控制点手动 hex 随便填。"随机" 按钮特意用 OKLCH 撒点就是为了避开废色, 把它当起手, 再微调。

  • 导出 CSS 多 radial-gradient 兜底, 然后以为这就和 SVG 输出一样。它是 SVG 不能用的环境下的低保真兜底, 不是替代品。

隐私说明

所有操作都在你这个浏览器标签页里完成。控制点位置、颜色、当前预设、 渲染模式、画布比例、模糊半径全部通过 URL 序列化, 分享链接能还原 同一张 mesh, 不上传任何东西, 不发 analytics 带配置, 服务器根本 不知道你选了什么颜色。PNG 导出走 canvas.toBlob 本地生成, SVG 导 出是内存里拼的字符串。"随机" 按钮的 OKLCH 采样是一个 30 行的纯 函数, 不是 API 调用。关掉标签页, 你设计的这张 mesh 在任何地方 都不会留下记录。

常见问题

类似工具组合

做你这行的人, 还会一起用这些。

看这个职业的全部工具
Made by Toolora · 100% client-side · Updated 2026-06-13