# 弥散渐变（Mesh Gradient）

镜语 · 版式与界面 / 色调与氛围

- 别名：弥散光、极光背景、Aurora Background、网格渐变、渐变光斑
- 口语：「背景是几团颜色晕开的」「像极光一样流动的渐变」「AI 产品官网那种彩色雾」
- 一句话：几团柔和色彩互相晕开、缓慢流动的背景，常见于 AI 与 SaaS 落地页
- 是什么：弥散渐变（Mesh Gradient）由多个颜色点在二维网格或多团径向渐变中互相晕开，形成没有明确边界的柔和色彩场；网页上常让它缓慢流动做背景。Stripe 等产品官网让它流行起来，也因此成为「AI 落地页模板感」的来源之一
- 缺了就不像：多团颜色无边界晕开；大面积作为背景
- 加了更像：缓慢流动；细颗粒噪点；简洁的前景
- 适合用在：产品官网首屏、活动页和个人主页背景；视频片头、口播背景、知识卡片底图；与玻璃拟态配合：彩色渐变给玻璃提供可以透出的颜色
- 看哪里：看背景里五团颜色在缓慢漂移、相互融合，没有任何清晰边缘；移动鼠标，离指针最近的那团颜色会跟过来。前景保持简洁：一张白色卡片和深色文字，才能压住彩色背景
- 注意：蓝紫渐变光球加居中大标题已经非常常见，容易显得像模板，可以换成与品牌相关的颜色；不要在渐变上放细小正文；动画速度要慢，快速流动会让人分心
- 描述示例：做一个弥散渐变风格（Mesh Gradient / Aurora）的个人主页首屏：背景是 4–5 团大面积柔和色彩（暖橙、蜜桃粉、淡紫、天蓝）互相晕开，没有边界，缓慢漂移，指针附近的颜色会被轻轻吸引；加一层很淡的颗粒噪点防止色带；前景只有大号深色标题、一句简介和一张白色圆角卡片，留出足够空白；整体温暖、流动、轻盈
- 易混：
  - [玻璃拟态](https://idea.ameng.dev/terms/glassmorphism.md)：弥散渐变是背景；玻璃拟态是放在这类背景上的半透明卡片
  - [流动渐变文字](https://idea.ameng.dev/terms/gradient-text.md)：流动渐变文字只给文字上色，弥散渐变铺满整个背景
- 相关：[合成波](https://idea.ameng.dev/terms/synthwave.md)、[泛光](https://idea.ameng.dev/terms/bloom.md)、[极简界面](https://idea.ameng.dev/terms/minimal-ui.md)

## 来源与延伸阅读

- [Apple Developer · SwiftUI MeshGradient](https://developer.apple.com/documentation/swiftui/meshgradient)
- [Stripe Blog · 官网渐变背景的前端实现](https://stripe.com/blog/connect-front-end-experience)

网页版（含演示）：https://idea.ameng.dev/terms/mesh-gradient