什么是网格渐变生成器？

为网站背景、社交媒体图形和 UI 设计生成多色网格渐变。选择颜色、调整控制点位置，获得超越简单线性或径向渐变的有机效果。

画布把多个径向渐变叠在一起，每个控制点对应一层。拖动控制点重新塑造混合效果，用色块替换它的颜色，代码会实时更新。最多六个点能让结果保持平衡。可按 1920x1080 等横幅尺寸导出为 PNG 或 SVG，把 SVG 直接粘到 Figma，或将代码取为 CSS、SCSS 或 Tailwind。

使用方法

1. 点击色块或输入十六进制色值来选择基础颜色，最多可添加 6 个颜色控制点。
2. 在画布上拖动控制点来改变渐变的流向。
3. 把代码复制为 CSS、SCSS 或 Tailwind，或将渐变下载为 PNG 或 SVG。

何时使用

• 做不像模板套出来的 Banner 背景。
• 为产品卡片或歌单封面填色,但不想用具体图片。
• 给 App 加载页和空状态做占位背景图。

结果

一位 UI 设计师用 4 个控制点创建了从紫色到青色的网格渐变，用于着陆页的首屏区域，然后复制 CSS 代码直接粘贴到样式表中。

常见问题

网格渐变和线性渐变有什么区别?

线性渐变只是沿一条轴融合两种颜色。网格渐变是把多个柔和的色斑叠在一起,效果更像水彩晕染,而不是干净的过渡。颜色之间的分界线更难看出来。

为什么 CSS 用 radial-gradient 而不是 conic-gradient?

径向渐变的浏览器兼容性最广,降级也最干净。工具为每个控制点输出一段 radial-gradient,然后用 background-image 叠加合成,所有现代浏览器都能直接渲染,不需要 polyfill。

网格渐变在 Safari 和 Chrome 里看起来一样吗?

一样。输出用的是标准 CSS radial-gradient,不需要任何浏览器前缀。Safari、Chrome、Firefox、Edge 渲染的结果完全一致。老浏览器会退回到首个颜色。

最多能用几个控制点?

最多六个。再多通常会让颜色变浑浊,而不是更丰富。两到三个点适合做装饰风的干净渐变,四到六个则更接近水彩画的柔和效果。

能不能导出成 SVG?

可以。SVG 导出用堆叠的 radial-gradient 图层来构建渐变，因此凡是 CSS 渐变能用的地方都能显示，也能直接粘贴到 Figma 作为形状填充。符合规范的真正 SVG 网格渐变目前在任何地方都还不被支持，所以这种堆叠方式才是无论粘到哪里都真正能用的版本。

相关工具