什么是网格渐变？
网格渐变（Mesh Gradient）是一种颜色从分布在曲面上的多个源点向外流动、相互融合的渐变类型。与线性渐变或径向渐变——沿单一轴从固定点混合——不同，网格渐变能产生有机的、多方向的色彩过渡，视觉上自然而富有立体感。
网格渐变的工作原理
标准 CSS 渐变沿单一轴定义方向和色标，效果可预期但受限——颜色只能从一条边或一个中心点线性或径向过渡。
网格渐变增加了第二个维度。颜色节点分布在整个平面上，节点之间的空间由相邻颜色平滑插值填充。效果就像光线透过弯曲的半透明曲面——柔和、深邃、不断流动。
GradLab 通过 WebGL 着色器生成网格渐变——直接在 GPU 上运行的代码，可实时计算每个像素的颜色混合，因此渐变能流畅动画而不产生性能开销。
网格渐变视觉上有何不同
视觉差异源于两点：
多点颜色布局。 线性渐变在两条边之间流动；网格渐变在多个点之间同时流动，产生更复杂的颜色交互——颜色以不同角度相遇、在局部区域汇聚、沿隐含曲线环绕。
多种色彩空间。 GradLab 支持 RGB、OKLCH 和 OKLAB，默认 OKLCH。不同模式提供不同的亮度与色相过渡，可根据配色比较选择。
网格渐变与 CSS 渐变对比
| CSS 渐变 | 网格渐变 | |
|---|---|---|
| 方向 | 单轴 | 多方向 |
| 颜色来源 | 线上的 2+ 个色标 | 平面上的多个节点 |
| 视觉感受 | 干净、几何感 | 有机、接近摄影质感 |
| 动画 | CSS 过渡（有限） | 实时 GPU 着色器 |
| 浏览器支持 | 原生 | 需要 WebGL |
完整对比请参见网格渐变与 CSS 渐变。
网格渐变的使用场景
- 应用 UI 背景 — iOS 和 macOS 系统 UI 中广泛使用网格渐变风格
- 网站 Hero 区 — 在 SaaS 和产品落地页中非常流行
- 社交媒体图形 — 帖子和故事的吸睛背景
- 演示文稿 — 无需复杂设计工作即可获得高质感幻灯片背景
- 壁纸 — 适配任何屏幕的抽象艺术
如何在线生成网格渐变
GradLab 是免费的在线网格渐变生成器。在任意浏览器中打开，调整颜色和动态参数，将结果导出为 PNG 图片、MP4 视频或独立 HTML 文件——无需注册。