NEAT

Mesh gradient generator

A mesh gradient blends colours across a surface in two dimensions rather than along a single axis, which is why the results look organic instead of like a colour ramp. Neat generates them on the GPU and animates them, so the mesh drifts rather than sitting still.

Open the editor 25 presets

What a mesh gradient actually is

In a linear gradient, every colour stop sits on one straight line and the renderer interpolates between neighbours. There is exactly one axis, so the result always reads as a ramp.

A mesh gradient places colour influence points across a two-dimensional surface and blends between all of them at once. Because each point pulls colour in every direction, the boundaries curve and pool the way ink does in water. That is the whole visual difference, and it is why mesh gradients became the default look for product marketing around 2020.

Neat adds a third element: the surface itself is not flat. A subdivided plane is displaced with Perlin noise before the colours are blended across it, so shading follows real geometry. Set wave amplitude to 0 and you get a conventional flat mesh gradient; raise it and the mesh gains depth.

Making one

Start from a preset close to what you want rather than from scratch — the parameter space is large and a cold start is rarely productive. Pastel, Coral and Oil Slick are the closest to the classic flat mesh look; Monterey and Night Dunes are the dark equivalents.

From there:

  • Set wave amplitude to 0 or 1 for a flat mesh. Higher values are a different aesthetic — good, but no longer what most people mean by mesh gradient.
  • Use four to six colours. Two or three tends to collapse back into looking like a linear gradient.
  • Keep speed low, around 0.5 to 1.5. Mesh gradients read as premium when they drift; at high speed they read as a screensaver.
  • Add grain if you see banding. Large areas of smoothly interpolated colour are exactly where 8-bit-per-channel banding shows up, and a noise pass hides it for free.

Exporting a mesh gradient

If you need a still mesh gradient — for a slide, a thumbnail, an OG image — export a PNG and you are done. If you want it animated on a site, take the config and pass it to the package:

import { NeatGradient } from "@firecms/neat";

const gradient = new NeatGradient({
  ref: document.getElementById("gradient"),
  colors: [
    { color: "#E3D1E6", enabled: true },
    { color: "#ffc8dd", enabled: true },
    { color: "#ffafcc", enabled: true },
    { color: "#C5E2FF", enabled: true },
  ],
  speed: 1,
  waveAmplitude: 0,   // flat mesh
  colorSaturation: -4,
  colorBrightness: 1,
  grainScale: 2,
});

Questions

What is the difference between a mesh gradient and a linear gradient?

A linear gradient interpolates colours along one axis, so it always reads as a ramp. A mesh gradient blends between colour points spread across a two-dimensional surface, so boundaries curve and pool. Mesh gradients look organic; linear gradients look mechanical.

Can I export a mesh gradient as a PNG?

Yes. The editor exports a still PNG at your current canvas size, plus MP4 or WebM if you want the animation as a video file.

Can I make a static mesh gradient in CSS?

Approximately. Layering several radial-gradient() backgrounds at different positions gets you a passable flat mesh, and it costs nothing to render. It cannot animate smoothly or produce the depth shading that a displaced 3D surface gives you, which is the trade-off.

How many colours should a mesh gradient use?

Four to six. Fewer than four and it tends to collapse back into looking linear; more than six and the individual colours stop being distinguishable.

Keep reading