网格渐变是什么风格？
网格渐变就是 2020 年代初的 SaaS 首屏：紫、品红、天青的柔软光团彼此融化，躲在粗体标题后面，光本身成了背景。
网格渐变速览
网格渐变（mesh gradient）是 2020 年代初 SaaS 落地页的面孔：紫、品红、天青、琥珀几团巨大的柔软色块彼此融化，躲在粗体无衬线标题后面。颜色被模糊到没有任何边缘，背景因而读起来是一种光源，而不是某个事物的图像。它通常架在近乎纯黑的底色上，使颜色像在发光。
在这片光之上，只放少数克制的元素：一行粗重的白色标题承载信息；带着一圈细而半透明白边的毛玻璃卡片，装功能、价格或更新日志；标题里偶尔放一个等宽字体的词，比如“工程师”之类的标签，带来一点技术味。下面是安静的十二栏网格，让一切对齐，所以戏剧性被限制在背景里，内容依然井然有序。
它的吸引力在于既显得昂贵又显得失重。渐变不需要插图就能暗示运动与可能性，玻璃卡片让界面显得有层次、够现代。作为一套系统，它更像一份配方而不是一个母题：发光的网格、毛玻璃卡片、粗体字、克制的网格，每个组件各司其职。
网格渐变从何而来？
这种外观有一条可以追溯的谱系。Stripe 被普遍认为让渐变动了起来：2019 年前后，它的营销网站使用 WebGL 渲染的动态渐变，大约 2019 到 2020 年这个做法开始扩散。在浏览器里缓慢变化的渐变，而不是一张静态图片，本身就是对工艺的宣示，其他公司注意到了。
第二个成分是玻璃拟态（glassmorphism）。这个词在 2020 年 11 月被命名，Michal Malewicz 与它的命名和推广相关联：半透明、模糊的面板，带一圈浅色边缘，漂浮在彩色背景之上。Kevin Hufnagl 同样被列为这股浪潮的关键人物之一。把玻璃拟态卡片与模糊的网格背景结合，让设计师不依靠厚重阴影或装饰就能表现出深度。
第三个成分是深色底。面向开发者的公司，包括 Vercel 和 Linear，把渐变放在近乎纯黑的底色上，配上粗体白字。Linear 的网页团队被列为这种外观的关键贡献者之一。到 2021 年，深色底渐变首屏达到高峰，许多 SaaS 网站的开场画面都很相似：一片发光的底、一行大标题，再加两张玻璃卡片。
作为一场潮流，网格渐变属于 SaaS 营销设计、玻璃拟态和 WebGL 首屏背景，它的中心是全球性的，但以旧金山和远程办公的 SaaS 公司为引领。它是属于那个时刻的设计：反映的是软件公司希望同时显得技术过硬又沉稳的年代。它的泛滥也使其成为被批评为千篇一律的对象，所以像这样的系统更注重让配方“老实”：每个成分都有理由，而不是单纯的装饰。
网格渐变的视觉特征是什么？
色彩
色板是近乎纯黑的底色，加上少数发光的色相：紫、品红、天青，再点缀一点琥珀。这些颜色从不以平涂色块出现，而是彼此模糊融合，过渡连续不断，饱和度高到足以在黑底上发光。文字和细线是白色，让缤纷的部分只留在背景里。
模糊的网格
标志性元素是一片巨大、被重度模糊的色团，常带缓慢漂移的动画。它的边缘已被溶解，读起来像环境光。网格被放在内容之后作为氛围，是整套设计唯一允许奢华的地方。缓慢的运动让页面有了生命感，又不会分散对信息的注意。
毛玻璃卡片
卡片是半透明且带模糊的，背后的颜色柔和地透出来，每张卡片边缘有一条低不透明度的白色细线。它们承载功能点、定价档位或发布说明。玻璃效果无需硬阴影就把内容与背景分开，也让光晕在整页中依然可见。
粗体无衬线标题
标题又大又重，使用干净的无衬线体，颜色为白色，所以即使压在渐变最亮的地方也依然可读。它简短、陈述式，通常是屏幕上唯一的大字。强烈的字重是对背景柔软感的刻意平衡。
一个等宽词
在标题内部或旁边，有一个词用等宽字体排印，向开发者受众发出信号。克制是关键：只用一个词做等宽，是技术感的点缀；通篇使用就会把页面变成终端。这是一个小动作，却告诉开发者这个产品是为他们做的。
底下的安静网格
在华丽之下是规整的十二栏布局。卡片对齐它，文字对齐它，章节之间的间距宽裕而一致。这是页面不至于塌缩成纯氛围的原因：结构保守，背景才有资格戏剧化。
谁塑造了网格渐变？
与 2020 年 11 月玻璃拟态的命名与推广相关联。他对半透明、模糊、带浅色边缘面板的阐述，给设计师提供了描述覆在网格背景之上那些毛玻璃卡片的语汇。
被列为玻璃拟态与渐变首屏浪潮的关键人物之一。他的工作属于同一时刻：模糊、分层的界面从实验走向主流产品营销。
被认为在 2019 年前后用 WebGL 渲染的首屏让渐变动了起来。这个决定把静态背景变成了活的表面，也成为后来许多 SaaS 营销网站的参照点。
被列为深色底渐变外观的关键贡献者之一。他们的营销页面帮助展示了近乎纯黑的底、克制的字体和发光的色彩如何传递出一种精确、面向开发者的产品气质。
今天怎么用网格渐变？
在幻灯片里，网格渐变最适合标题页、产品发布公告和章节分隔页。把发光的色场做成满版背景，压一行简短的白色标题，再用一张玻璃卡片放副标题或日期。避免把密集文字直接压在渐变最亮的区域；内容页要换用渐变中更平静的部分，或把背景压暗，让文字依然易读。
数据页上，把渐变当作舞台背景，把玻璃卡片当作舞台。深色底上、毛玻璃卡片里的图表显得精致，前提是图表本身只用一组取自网格的克制色彩。网格线要淡，标签用白色，你在意的那个数字放大。不要让背景的颜色与数据系列争夺注意力；背景越鲜艳，图表就越要安静。
在网页界面里，这种风格在开发者工具和 SaaS 产品的发布页、定价页与更新日志里最自然。首屏承载光晕和标题，定价档位与发布说明放进下方的玻璃卡片。让动态网格保持缓慢，并为偏好减少动态效果的用户提供静态替代，因为文字后面的运动会让人疲劳。
在编辑与营销物料中，这种外观适合公告文章、会议图形、通讯邮件抬头与社交图片，一句强有力的话就足够。渐变承担了插图的工作，所以版式可以保持极简。它不太适合长篇阅读，因为发光的背景与玻璃层在多段文字之下会让人累。
最常见的错误是把渐变当作装饰，用在一个本来就杂乱的页面上。这种风格依赖安静的结构和少量元素；多加卡片、多加颜色、多加动效都会破坏平衡。第二个错误是对比度不足：文字放在亮色团块上的玻璃卡片里，读起来费劲。第三个是滥用：由于这种外观曾经遍地都是，除非内容、文案和层级明显属于你的产品，否则它读起来会显得千篇一律。
网格渐变 · 常见问题
什么是网格渐变？
网格渐变是由若干大块、柔和模糊的色斑彼此平滑融合而成的背景，而不是简单的双色线性渐隐。在 2020 年代初的 SaaS 风格里，色斑通常是近黑底上的紫、品红、天青和琥珀，有时还带缓慢漂移的动画。
这种风格是谁开创的？
没有单一的作者。Stripe 被广泛认为在 2019 到 2020 年前后推出了 WebGL 动态渐变，玻璃拟态于 2020 年 11 月被命名并与 Michal Malewicz 相关联，Vercel 和 Linear 等公司则把渐变带到了深色底上。这种外观由这些影响交织而成，并在 2021 年前后达到高峰。
什么是玻璃拟态，它和这种风格是什么关系？
玻璃拟态指的是带细浅边缘的半透明、模糊面板，看起来漂浮在彩色背景之上。在网格渐变风格里，玻璃卡片是内容层，网格是背景层。两者互相需要：没有背后的色彩，模糊就无物可显；而缤纷的网格也需要一个平静的表面来承载文字。
如何让网格渐变上的文字保持可读？
用白色粗体标题，把正文放进毛玻璃卡片里，而不是直接压在渐变最亮的区域。在长文本所在位置压暗底色，减少相互竞争的颜色数量，并在最亮的区域检查对比度。如果渐变带动画，要保持缓慢，并为偏好减少动态效果的用户提供静态版本。
这种风格现在过时了吗？
它与 2019 到 2022 年联系紧密，又因为被大量模仿，使用不当会显得千篇一律。当结构有纪律、内容足够具体时，它依然好用：安静的网格、简短的标题，加上少量玻璃卡片。以这种克制来使用，它读起来是对软件设计史上一个可辨认时刻的有意引用，而不是默认模板。
