Figma 弥散渐变和网格渐变能做吗？从四种原生渐变讲起

做落地页背景、App 启动页、海报或者按钮时，设计师最常搜的几个问题是：Figma 渐变色怎么做？弥散渐变、网格渐变（Mesh Gradient）在 Figma 里能不能做？要不要装插件？

结论先说：普通的线性、径向渐变，Figma 自带功能就够；「几团颜色柔和地融在一起」的弥散背景，用自带的模糊效果也能拼出来；只有真正要拖动网格控制点、或者想批量拿现成配色时，插件才更省事。下面按这个顺序讲。

一、Figma 自带的四种渐变

根据 Figma 官方帮助，渐变可以用在图层的**填充（Fill）和描边（Stroke）**上，一共四种类型：

类型 效果 常见用途 Linear 线性 沿一条直线从一个颜色过渡到另一个 背景、按钮、图片上的暗色遮罩 Radial 径向 从中心向外圆形扩散 光晕、聚光、暗角 Angular 角度 从起点顺时针绕中心一圈 色环、金属环、加载圈 Diamond 菱形 从中心向四个方向扩散，宽高可分别调 宝石感高光、风格化光效

基本操作（来自官方帮助）

1. 在画布上选中一个图层；
2. 点右侧栏 Fill 或 Stroke 里的色块，打开取色器；
3. 在填充类型里选 Gradient；
4. 从下拉菜单里选渐变类型（Linear / Radial / Angular / Diamond）；
5. 调整色标（color stop）：默认有两个色标，拖动可以改变位置；在渐变条上任意位置点击，或点 Stops 旁边的加号，可以新增色标；选中色标按 Delete，或点旁边的减号，可以删除。

取色器里还有 Flip gradient（反转颜色顺序）和 Rotate gradient（旋转方向）。（来源：Figma 帮助：Use gradients as a fill or stroke）

三个实用习惯

• 做渐隐，用透明度而不是白色。 每个色标都有自己的不透明度。比如给照片底部压一层深色，让白字更清楚，把最后一个色标设成同色、0% 不透明度，过渡会比渐变到白色或黑色自然得多。
• 一个图层可以叠多个填充。 官方帮助说明一个图层能有多层填充，可以拖动调整顺序（来源：Figma 帮助：Guide to fills）。在线性渐变上面再叠一层带透明区域的径向渐变，就能做出更有层次的背景，而且仍然只有一个图层。
• 两个距离很远的饱和色直接相接，中间容易发灰。 例如蓝色直接过渡到橙色，中段会变脏。在中间加一个过渡色标（比如粉色）通常就能解决；如果想换一种插值方式，可以看下文的 Non Boring Gradients。

让团队复用同一个渐变

渐变的每个色标都可以绑定颜色变量（Variable）：在取色器里选中某个色标，切到 Libraries 标签选变量即可；整个渐变则可以存成颜色样式（Color Style），样式里可以包含变量值。（来源：Figma 帮助：Use gradients as a fill or stroke、Create and edit styles）

边界：变量绑定的是单个色标的颜色，不是整条渐变；要让全团队用同一条渐变，存成样式再发布到团队库更直接。

二、不装插件，怎么做弥散渐变

Figma 的四种渐变都是「沿一条线或绕一个点」过渡，没有原生的网格渐变（Mesh Gradient）填充类型。不过常见的「弥散」「彩云感」背景，用自带效果就能拼出来：

1. 建一个 Frame 当背景，填一个底色，并确认 Frame 开启了裁剪内容（Clip content），这样模糊不会溢出画框；
2. 在里面画三四个大椭圆，分别填你的配色，互相重叠；
3. 选中这些椭圆，在右侧 Effects 里加 Layer blur，把模糊值调大，颜色就会融在一起；
4. 想要颗粒质感，再加一层 Noise 效果。

官方帮助里，Figma 现在的效果有 Glass、Drop shadow、Inner shadow、Layer blur、Background blur、Noise、Texture 七种；Layer blur 还分整体均匀模糊（Uniform）和可控制起止强度的渐进模糊（Progressive）。（来源：Figma 帮助：Apply effects to layers）噪点的具体用法我们在Figma 噪点颗粒感教程里写过，这里不重复。

这种做法的好处是：每一团颜色都还是独立图层，事后随时能拖位置、换颜色、改模糊值。缺点是没有网格控制点，想精确控制颜色在哪里交汇，只能靠移动椭圆。

另外，Figma 在 Config 2026 推出了着色器填充（Shader fill），官方说明它可以生成图案、渐变网格、噪点纹理和程序化背景。目前是公开测试（open beta），并且需要浏览器和系统支持 WebGPU。（来源：Figma 帮助：Find and use shaders）如果你的团队已经能用，它是最接近「原生网格渐变」的选项；不能用的话，就看下面的插件。

三、渐变插件：觅件库 18 款，按用途分

数据来自觅件插件库：「颜色」分类目前收录 44 款插件，其中名字里带 Gradient 的渐变类插件 18 款，库内标记免费 16 款、付费 2 款。下面按用途分组，功能介绍都来自插件作者的说明；标了免费但作者提到 Pro 版的，实际可用范围以安装时提示为准。

1. 要真正的网格渐变（可以拖控制点）

• Mesh Gradient丨网格渐变（免费）：基于 2D 网格生成渐变，可以直接编辑网格的顶点和边，支持保存后再载入继续改、渲染高分辨率图像。
• Mesh Gradient Maker丨网格渐变（免费）：最多 6 种颜色，可拖动颜色点调整混合位置，有 12 套预设配色和 Grain、Blur 等滤镜，自带社媒尺寸预设，最大 4096px，可插入画布或导出 PNG。
• Supa Mesh Gradient丨网格渐变（免费）：可选静态、颗粒或融球（metaballs）风格，能切换浅色、深色、透明背景，结果可直接应用到已选图层，也能存预设。
• Mesh Gradient Generator丨网格渐变（付费）：自由放置控制点、有预设。作者说明免费版有 4 个预设、只能 1x 导出；Pro 版才有全部预设、最高 4x 导出、直接应用到选中对象和颗粒效果。
• Mesh gradients丨网格渐变（付费）：作者说明为订阅制，个人版 $9.99/年、团队版 $39.99/年，价格以安装时提示为准。

注意边界： 这类插件多数是把结果生成成图片放进画布，不是可编辑的原生渐变。之后要改颜色，通常得回到插件重新生成，所以最终配色确定前，建议保留插件的预设或保存记录。

2. 弥散、颗粒感背景

• Noisy Gradients丨弥散渐变（免费，作者提到有 Pro 版）：自动生成多种配色的渐变背景并可加噪点；控制图形数量、调噪点尺寸属于 Pro 功能。
• Grainy Gradient丨颗粒状渐变（免费）：自定义颜色和噪点强度，直接应用到选中的 Frame 或形状，也可以按指定分辨率导出，关掉插件再打开会记住上次设置。
• Generative Gradients丨渐变色（免费）：通过颜色、半径、位置、模糊和扭曲参数生成复杂渐变，导出 PNG。
• Gradient Morph丨渐变变形（免费）：用随机噪点和颜色变形生成动态视觉，需要先选中一个 Frame 或矩形，生成后把画面复制进去；支持透明背景。
• Image2Gradient丨图像转渐变色（免费）：把一张「彩云感」参考图转成可编辑的渐变填充（原理是叠多层径向渐变），可调层数、柔和度和透明度；作者说明完全在 Figma 本地运行。看到喜欢的渐变参考图又想保留可编辑性时，可以先试它。

3. 想直接拿现成渐变配色

• uiGradients丨UI渐变色（免费）：uiGradients.com 官方插件，350+ 组渐变，选中 Frame、Group 或文字后一键应用。
• Webgradients丨渐变色卡（免费）：Webgradients.com 官方插件，180 组渐变，可按颜色筛选、收藏、看最近使用。
• Gradients+丨渐变色（免费）：250+ 组渐变，带随机生成，适合找灵感。
• Gradients Lab™丨渐变（免费，作者提到有 Pro 版）：大量预设，可调颗粒、对比度、亮度和色相，支持 SVG 等格式和不同宽高比导出；自定义色标和更细的导出控制属于 Pro（一次性买断）。

4. 让原生渐变更精确、更顺滑

• Easing Gradients丨缓和渐变（免费，开源 MIT）：用三次贝塞尔或阶梯缓动曲线重新分布渐变过渡，特别适合透明渐隐。作者说明它只读取第一个和最后一个色标，原有的中间色标会被删掉，用之前心里要有数。
• Non Boring Gradients丨渐变（免费）：在 sRGB 之外，可以按 HSL、LCH 等插值方式生成渐变，适合解决上面说的「中间发灰」。
• Precise Gradients丨精确渐变（免费）：把渐变控制点吸附到网格、角度取整、均匀分布色标。作者说明目前主要支持填充渐变，描边渐变还在计划中。
• Supa Gradient丨渐变（免费）：在插件里创建和管理线性、径向、角度渐变及渐变样式，可精确调色标位置和不透明度，还能复制渐变的 CSS 代码，方便交给前端。

四、按需求对号入座

你要做的 先试 备注 按钮、背景、图片暗色遮罩 自带 Linear / Radial 渐隐用 0% 不透明度色标 团队统一品牌渐变 存成颜色样式，色标绑变量 变量只绑单个色标 弥散彩云背景，还要能随时改 椭圆 + Layer blur + Noise 没有网格控制点 真正的网格渐变 Mesh Gradient、Mesh Gradient Maker 结果多为图片 参考图转成可编辑渐变 Image2Gradient 叠多层径向渐变 快速找配色灵感 uiGradients、Webgradients、Gradients+ 都是现成色卡 渐隐太生硬、中间发灰 Easing Gradients、Non Boring Gradients Easing 会删中间色标 渐变交给前端写 CSS Supa Gradient 可复制 CSS

用中文更快找到合适的渐变插件

上面这些插件都能在觅件的「颜色」分类里看到中文介绍、是否付费和适用场景，不用拿英文关键词在社区里一个个试。如果你平时在 Cursor、Claude、ChatGPT 这类 AI 工具里工作，也可以接入觅件 MCP，直接用中文问「有没有能做网格渐变的 Figma 插件」。