ZH
我的工具

网格渐变(Mesh Gradient)生成器

用 2–8 个色点或种子生成的随机颜色制作柔和的网格渐变背景。在 OKLab 中混色,可加噪点防止色带,并下载 PNG、JPG 或 WebP。

每行一个:颜色,然后是它在图像中的 x、y 位置(%),例如 #4D96FF 15% 80%。
随机模式下,相同的种子总会得到相同的颜色和位置。
用细微噪点掩盖平滑渐变中的色带。
我的工具 →
广告

网格渐变不像 CSS 渐变那样沿一条直线混色,而是把位于画布不同位置的多种颜色融合在一起。这种柔和、有机的质感很受欢迎,常用于壁纸、首页大图和应用启动页。这个生成器会放置你的色点(或由种子生成的随机色点),在 OKLab 色彩空间中用所有色点混合每个像素,让混色保持干净而不发灰,可选添加防止色带的噪点,并保存为 PNG、JPG 或 WebP——全部在你的浏览器中完成。

使用方法

  1. 按“颜色 x% y%”的格式每行输入一个色点,或选择随机颜色并设置种子。
  2. 选择尺寸预设或自定义尺寸。
  3. 选择颜色混合得多柔和,以及在 OKLab 还是 sRGB 中混色。
  4. 大屏幕可加一点噪点(2–6%),再选择格式并下载。

计算公式

color(pixel) = Σ wᵢ × colorᵢ ÷ Σ wᵢ, with wᵢ = 1 ÷ (dᵢ² + 0.04²)^(p ÷ 2)

dᵢ 是像素到点 i 的距离(相对于图像对角线),p 取 1.6(非常柔和)、2.4(适中)或 3.6(分明);很小的 0.04 项会磨平每个点处的尖峰,避免它显示成生硬的斑点。颜色按 OKLab 坐标求平均,这样从蓝到黄的混合不会经过灰色;半透明的点会像 CSS 那样按不透明度加权,因此会变淡而不会变暗。混合在最多 250,000 个采样点的网格上计算,再用双线性插值放大。

示例

用默认的四个色点——10% 15% 处的珊瑚红 #FF6B6B、85% 10% 处的黄色 #FFD93D、80% 85% 处的绿色 #6BCB77、15% 80% 处的蓝色 #4D96FF——生成的 1920 × 1080 图像在 (192, 162) 处是珊瑚红,在 (1536, 918) 处是绿色,其间是柔和的 OKLab 混合。两个色点——0% 50% 处的黑色和 100% 50% 处的白色——在 sRGB 中混合,正中间到两点距离相等,得到约 #808080 的中灰色。

常见问题

为什么要加噪点?

大屏幕上平滑的渐变会出现可见的台阶(色带),因为 8 位色每个通道只有 256 级。几个百分点的噪点可以打散这些台阶,在正常观看距离下几乎看不出来。

能再次得到同样的图像吗?

可以。同样的色点总是生成同样的图像;随机模式下,相同的种子和设置会重现同样的颜色、位置和噪点。

CSS 版本是一样的吗?

不一样。CSS 没有网格渐变,所以本工具给出的是叠加的径向渐变,看起来相似但混合方式不同。需要精确效果时请使用图像。

资料来源

最后更新:

引用此工具
APA

kakaoCalc. (2026, November 8). 网格渐变(Mesh Gradient)生成器. https://kakao.mobile/zh/tools/mesh-gradient-generator/

MLA

“网格渐变(Mesh Gradient)生成器.” kakaoCalc, 8 Nov. 2026, kakao.mobile/zh/tools/mesh-gradient-generator/.

广告