NEAT

Gradient generator

Neat is a free gradient generator that renders in WebGL rather than CSS. You pick colours, adjust how they move, and export either a config object you drop into a site or a flat PNG or MP4 file. Everything runs in the browser — nothing is uploaded, and there is no account.

Open the editor 25 presets

What this generator makes

Most gradient generators output a CSS linear-gradient() or radial-gradient() string: two or three colour stops along a straight axis, rendered once and then static. That is the right tool for a button fill or a card background, and if that is what you are after, a CSS generator will serve you better than this one.

Neat does something different. It renders a subdivided plane on the GPU, displaces it with Perlin noise to create waves, and blends up to six colours across the resulting surface in a fragment shader. The output is a moving surface with visible depth, running at 60fps, that you place behind your page as a single <canvas>.

Using it

Open the editor and you land on a live gradient. The controls on the right change it in real time — there is no render step and no preview button. The parameters worth knowing:

  • Colours — up to six, each individually toggleable. Adding a near-black or pure white to an otherwise mid-tone palette is what produces highlights and shadow, because the shader treats them as luminance rather than just another hue.
  • Wave amplitude — how far the plane is displaced. At 0 you get a flat colour field; at 10 the surface folds over itself.
  • Speed — how fast the noise field advances. Below 1 the movement stops reading as animation and starts reading as texture.
  • Saturation and brightness — applied after blending, so they affect the whole composition rather than individual stops. Negative saturation is how you get the muted, print-like presets.
  • Grain — a procedural noise pass on top. Its main practical use is breaking up colour banding across large dark areas.

Exporting

Three routes out, depending on what you need:

  • Config object — a plain JavaScript object you pass to the @firecms/neat package. This keeps the gradient live and animated on your site.
  • PNG — a still frame at your current canvas size, for when you need a flat image.
  • MP4 or WebM — a recorded loop, for video editors, presentations, or as a <video> poster where you would rather not ship WebGL.
npm install @firecms/neat

Putting it on a page

The exported config goes straight into the constructor. One canvas, one object, no build step required:

<canvas id="gradient" style="position:fixed;inset:0;width:100%;height:100%"></canvas>

<script type="module">
  import { NeatGradient } from "@firecms/neat";

  const gradient = new NeatGradient({
    ref: document.getElementById("gradient"),
    // ...paste your exported config here
  });
</script>

Questions

Is this gradient generator free?

Yes. The editor and the npm package are free to use. An unobtrusive NEAT watermark is drawn on the canvas unless a licence key is set, which is a one-off €12. PNG and video exports are not watermarked differently from the live canvas.

Does it output CSS gradients?

No. Neat renders in WebGL, not CSS, so there is no linear-gradient string to copy. If you need a static CSS gradient for a button or card, a dedicated CSS gradient generator is the better tool. If you want the animated look with CSS only, see our guide to animated CSS gradient backgrounds.

Will it slow my site down?

The package is around 17 KB gzipped with no dependencies, and rendering happens on the GPU rather than the main thread. The practical cost is GPU time on low-end devices; if that matters for your audience, export a PNG or a short MP4 loop instead of shipping the live canvas.

Do I need to know WebGL or shader code?

No. The editor exposes everything as sliders and colour pickers, and the exported config is a plain object. You never touch the shader unless you want to.

Keep reading