---
title: "Figma 弥散渐变和网格渐变能做吗？从四种原生渐变讲起"
excerpt: "Figma 能做弥散渐变和网格渐变吗？先讲线性、径向、角度、菱形四种原生渐变和色标、样式用法，再用椭圆加 Layer blur 拼弥散背景，最后按用途介绍觅件库 18 款渐变插件的免费与付费边界。"
canonical: https://plugmate.figmod.top/blog/figma-gradients
---

# 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](https://help.figma.com/hc/en-us/articles/34208860210199-Use-gradients-as-a-fill-or-stroke)）

### 三个实用习惯

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

### 让团队复用同一个渐变

渐变的**每个色标**都可以绑定颜色变量（Variable）：在取色器里选中某个色标，切到 Libraries 标签选变量即可；整个渐变则可以存成**颜色样式（Color Style）**，样式里可以包含变量值。（来源：[Figma 帮助：Use gradients as a fill or stroke](https://help.figma.com/hc/en-us/articles/34208860210199-Use-gradients-as-a-fill-or-stroke)、[Create and edit styles](https://help.figma.com/hc/en-us/articles/360038746534-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](https://help.figma.com/hc/en-us/articles/360041488473-Apply-effects-to-layers)）噪点的具体用法我们在[Figma 噪点颗粒感教程](https://plugmate.figmod.top/blog/figma-noise-texture)里写过，这里不重复。

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

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

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

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

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

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

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

### 2. 弥散、颗粒感背景

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

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

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

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

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

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

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