NEAT

Gradient video generator

Design an animated gradient in the browser and record it straight to a video file. Useful when you need a moving gradient somewhere that cannot run WebGL — a video editor timeline, a slide deck, a social post, or a <video> element you would rather ship than a canvas.

Open the editor 25 presets

Recording a gradient

The editor records the live canvas directly, so what you see is what lands in the file. Set the gradient up first, then record — there is no separate render queue and no server round trip. Recording happens entirely on your machine via the browser's MediaRecorder API.

Format depends on your browser. MP4 with H.264 is preferred where the browser supports it, with WebM as the fallback; Chrome and Edge will generally give you MP4, Firefox will give you WebM.

Getting a clean loop

The animation is driven by a continuous noise field rather than a fixed-length timeline, so there is no natural loop point. In practice that means a recording will not seam perfectly if you cut it and repeat it.

Two ways around it, depending on what you need:

  • Record long, cross-fade short. Take 20–30 seconds and cross-fade the last second into the first in your editor. At low speed values the colours change slowly enough that a one-second dissolve is invisible.
  • Drop the speed. At speed 0.5 or below, any two frames a few seconds apart are close enough that a hard cut reads as continuous.

Using it as a page background

If you are shipping the video to a website rather than the live canvas, the usual attributes apply — and playsinline matters, without it iOS will take the video fullscreen:

<video
  autoplay
  loop
  muted
  playsinline
  poster="gradient-poster.jpg"
  style="position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1">
  <source src="gradient.mp4" type="video/mp4" />
  <source src="gradient.webm" type="video/webm" />
</video>

Video file or live canvas?

A recorded video is a fixed size and a fixed composition — it will letterbox or crop at aspect ratios you did not record for, and a 20-second 1080p loop is typically a few megabytes. The live canvas is around 17 KB gzipped, adapts to any viewport, and can react to scroll or pointer position, but it needs WebGL and costs GPU time.

As a rough rule: use the video when the destination is not a web page, or when you need guaranteed identical output everywhere. Use the canvas when it is your own site and you want it to fit the viewport properly.

Questions

Can I export an animated gradient as MP4?

Yes. The editor records the live canvas to MP4 where the browser supports H.264, and falls back to WebM otherwise. Recording is local — nothing is uploaded.

Can I export a gradient as a GIF?

Not directly. Export MP4 or WebM and convert, which will also give you a far smaller file than a GIF at the same quality — GIF is limited to 256 colours, which is unkind to a gradient.

How do I make the gradient video loop seamlessly?

The animation is driven by a continuous noise field, so there is no exact loop point. Record 20 to 30 seconds and cross-fade the end into the beginning, or drop the speed below 0.5 so a hard cut is imperceptible.

Is the gradient video free to use commercially?

The tool is free to use. An unobtrusive NEAT watermark is drawn on the canvas unless a licence key is set, which is a one-off €12 and removes it from recordings as well.

Keep reading