NEAT

Animated gradient generator

Create a moving gradient background and export it as code, a still image, or a video. Twenty-five presets to start from, six colour slots, and controls for how the surface moves. Free, runs entirely in your browser.

Open the editor 25 presets

The controls that matter

There are a lot of sliders. In practice four of them determine most of the result, and the rest are refinement:

  • Speed — the single biggest lever on how the gradient reads. Above 3 it is energetic and attention-seeking. Between 1 and 2 it reads as ambient. Below 0.5 it stops registering as animation and becomes texture that happens to change.
  • Wave amplitude — depth. 0 gives a flat 2D colour field; 10 folds the surface over itself. Most production sites want 0 to 5.
  • Colours — up to six. The useful trick is including one very dark or very light colour: the shader treats it as luminance, so it produces highlights and shadow rather than just another hue.
  • Colour saturation — applied after blending. Negative values are how the muted, editorial-looking presets are made, and they are usually what a design needs when full saturation feels cheap.

Speed, honestly

The most common mistake with animated gradients is running them too fast. A background that moves quickly competes with the content in front of it, and because it never stops, it never stops competing.

If the gradient sits behind text someone is meant to read, start at speed 1 and go down from there. Reserve the higher values for pages with almost no copy — a splash screen, a launch page, a video backdrop.

Exporting

The config export is a plain object with no framework assumptions:

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

const gradient = new NeatGradient({
  ref: document.getElementById("gradient"),
  colors: [
    { color: "#FD113F", enabled: true },
    { color: "#90E0FF", enabled: true },
    { color: "#FFC858", enabled: true },
    { color: "#753BFF", enabled: true },
  ],
  speed: 2,
  waveAmplitude: 10,
  colorBrightness: 1.05,
});

You can also take a PNG for a still frame, or record MP4 or WebM if the destination is not a web page.

Questions

What is the best speed for an animated gradient background?

Between 0.5 and 1.5 for anything sitting behind text. Higher values compete with the content, and because the animation never stops, it never stops competing. Save speeds above 3 for pages with almost no copy.

Can I use an animated gradient behind text?

Yes, but check contrast against the brightest and darkest frames the gradient produces rather than whichever one happens to be on screen. A low-speed, low-amplitude preset with a semi-transparent overlay is the reliable approach.

How many colours can an animated gradient have?

Up to six, each individually toggleable. Including one very dark or very light colour gives you highlights and shadow, because the shader reads it as luminance.

Can I export the animation as a file?

Yes — PNG for a still frame, MP4 or WebM for the animation. Both are produced locally in the browser.

Keep reading