网格渐变（Mesh Gradient）生成器

用多层径向渐变制作柔和的网格风格 CSS 背景。拖动颜色点、设置扩散范围，用随机种子随机生成，并复制纯 CSS 代码。

网格渐变设置

背景色

随机种子

颜色点

颜色

扩展%

X 位置%

Y 位置%

预览

在预览中拖动控制点，或直接输入精确数值。

CSS 代码

background-color: #ff99cc;
background-image:
  radial-gradient(at 0% 0%, #ffb3ba 0, transparent 50%),
  radial-gradient(at 100% 0%, #bae1ff 0, transparent 50%),
  radial-gradient(at 100% 100%, #baffc9 0, transparent 50%),
  radial-gradient(at 0% 100%, #ffffba 0, transparent 50%);

什么是网格渐变生成器？

用纯 CSS 制作流行的柔和“网格渐变”效果：一个背景色加上若干个径向渐变，每个渐变从一个颜色点出发，逐渐淡出为透明。你可以通过在预览中拖动或输入位置来放置最多八个点。

如何使用网格渐变生成器

选择“背景色”。
选中一个颜色点，设置它的“颜色”“扩散”和“X 位置”/“Y 位置”，或在预览中拖动该点。
用“添加点”/“删除点”改变混合的颜色数量（1–8）。
点击“随机生成”得到新的网格，或输入“随机种子”并点击“应用种子”得到可重现的结果。
复制 CSS 代码。

示例

输入

Default 4 points, background #ff99cc

输出

background-color: #ff99cc;
background-image:
  radial-gradient(at 0% 0%, #ffb3ba 0, transparent 50%),
  radial-gradient(at 100% 0%, #bae1ff 0, transparent 50%),
  radial-gradient(at 100% 100%, #baffc9 0, transparent 50%),
  radial-gradient(at 0% 100%, #ffffba 0, transparent 50%);

何时使用网格渐变生成器

适合首屏背景、落地页、应用启动页，以及玻璃拟态卡片后方的模糊色彩背景。如果需要精确的直线颜色过渡，请使用 CSS 渐变生成器；真正的网格变形则需要矢量工具或 canvas/WebGL 着色器。

网格渐变生成器的工作原理

每个点都会变成 radial-gradient(at x% y%, color 0, transparent spread%)，并全部列在 background-color 之上的 background-image 中。由于每个渐变都淡出为透明，颜色会相互重叠并平滑混合。随机生成使用带种子的伪随机数生成器（mulberry32）：相同的种子和点数总是产生相同的颜色和位置。这只是真正网格渐变（CSS 没有这种功能）的近似，而不是双线性网格片。