网格渐变生成器

用纯 SVG 渲染网格渐变

网格渐变——看似手绘笔触的多点彩色背景——因 Stripe 和 Linear 的营销页面而广为人知。此生成器以一段轻量、独立的 SVG 实现相同效果，无需图片文件、WebGL 或 canvas。

实现技巧

CSS 与 SVG 尚未完全支持原生网格渐变，工具因此堆叠多个柔和的径向渐变。每个渐变从某个 (x, y) 位置的选定颜色渐隐至透明，堆叠在纯色背景上时，这些径向色池互相晕染，呈现手绘网格的感觉。

该方案非常通用：输出的 SVG 仅使用标准的 <radialGradient> 与 <rect> 元素——没有滤镜、没有脚本——在任何支持 SVG 的环境中都能用。

控制项

• 点位 — 2 至 6 个彩色斑点。每个都有独立的颜色和 X/Y 滑块。
• 柔和度 — 每个径向渐变的半径。数值小 = 色彩集中、鲜明；数值大 = 柔和粉彩。
• 背景 — 斑点后方的纯色。
• 重新分布 — 随机打乱位置，保持调色板同时获得灵感。

使用场景

• 现代 SaaS 的英雄区背景
• 应用启动画面
• 播客 / 音乐封面
• 产品设计稿与营销横幅
• 博客与文档站点背景

通过 preserveAspectRatio="none"，SVG 可以伸展至任意容器，单个文件即可在任何断点下作为全宽背景。搭配颗粒渐变或噪点纹理生成器，即可获得富有质感的现代外观。