Founding offerLifetime Pro is $179 once. It goes to $249 after the first 50 buyers.Lifetime Pro $179, $249 after 50 buyersClaim it
gradients.sh
Get Pro

Export an animated gradient as a seamless MP4 loop

Turn a moving gradient into an MP4 that loops with no seam, then use it on the web, in slides or in a video edit.

To export an animated gradient as an MP4 loop, open the gradients.sh editor, pick or design a gradient, set its loop length, then choose Export → MP4 video. You get an MP4 (H.264 by default) that holds exactly one loop, so it plays end to end with no jump when your player repeats it. Exporting is free with an account and has no watermark.

This guide covers the settings that matter, why the file loops cleanly, and how to use it on a website, in a slide deck or in an editor.

1. Pick a gradient

Open /create. Start from a preset in the preset library, or choose a style (mesh, aurora, waves, grain, radial glow, linear flow and more) and set its colours, background, scale, warp, blur and grain. The canvas is the real renderer, so the export matches what you see.

2. Set the loop length

Open the More section in the inspector and find Loop. It sets how many seconds the motion takes to come back to where it started, from 4 to 30 seconds. The export is one full loop, so this is also the length of your video.

Two things to know before you export:

  • On the free plan, set Loop to 10 seconds or less. Free MP4s stop at 10 seconds, and most presets loop for longer, between 8 and 30 seconds. A longer loop gets cut at 10 seconds and won't meet its own start.
  • To change the pace, change Loop rather than Speed. A shorter loop moves faster and a longer one slower. Once you move the Speed slider, the export rounds Speed to a whole number so the file still loops: 1.3 exports at 1, and 0.4 exports as a still video. Keep Speed at 1 or 2 if you change it.

3. Export

Click Export, then MP4 video. The panel offers the sizes, frame rates and codecs your browser can encode, and estimates the file size before you start:

PlanSizeFrame rateCodecLength
Free1080p60 fpsH.26410 s
Pro6K120 fps at 1440pH.264, HEVC, AV1Full loop

These are the maximums. Free also offers 720p and 30 fps. On Pro, 4K and up stop at 60 fps, 120 fps is for 1440p and 1080p, and HEVC, AV1 and the higher settings appear only where your browser can encode them. A loop runs up to 30 seconds.

The free default is 1080p at 60 fps. A 10-second loop at that setting comes to about 24 MB, and the same loop at 30 fps to about 12 MB. H.264 plays in nearly every browser, app and device. HEVC and AV1 make smaller files at the same quality but play in fewer places.

Encoding happens on your machine, in a background worker that uses the browser's WebCodecs API. Chrome and Edge support it. If your browser can't encode video, the panel says so.

Why the file loops with no seam

Most gradient animations move a time value forward forever, so the last frame of any clip looks nothing like the first. gradients.sh moves time around a circle in the noise the gradient is drawn from. One loop is one trip around the circle, so the gradient arrives back at its starting state exactly.

The export follows a strict frame rule. A loop of loopSeconds at fps has round(loopSeconds × fps) frames, and frame i is drawn at i / fps seconds. The frame at the very end is left out, because it is identical to frame 0. When a player jumps from the last frame back to the first, the step is the same size as every other step, so there is nothing to see.

The same rule means copies placed back to back stay seamless, which is what you want for a long background in a video edit.

Use it on a website

Put the file in a muted <video> that plays inline and on repeat. Browsers only start muted video without a click, and playsinline keeps iPhones from opening it full screen. Start playback from a script only when the visitor hasn't asked for reduced motion, so they see the still poster instead:

<video
  class="gradient-bg"
  src="/gradient-loop.mp4"
  poster="/gradient-poster.jpg"
  muted
  loop
  playsinline
  aria-hidden="true"
  style="position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover"
></video>
<script>
  if (!matchMedia("(prefers-reduced-motion: reduce)").matches) {
    document.querySelector("video.gradient-bg").play();
  }
</script>

The poster shows while the video loads. Export a PNG of the same gradient from the editor, or grab the first frame with ffmpeg:

ffmpeg -i gradient-loop.mp4 -frames:v 1 gradient-poster.jpg

To serve a smaller file to browsers that play WebM, convert a copy to VP9 and list it first. The same script starts it:

ffmpeg -i gradient-loop.mp4 -c:v libvpx-vp9 -crf 32 -b:v 0 -an gradient-loop.webm
<video class="gradient-bg" muted loop playsinline poster="/gradient-poster.jpg">
  <source src="/gradient-loop.webm" type="video/webm" />
  <source src="/gradient-loop.mp4" type="video/mp4" />
</video>

Avoid GIF for gradients. It has 256 colours per frame, so smooth colour turns into visible bands.

Or skip the video

A website doesn't need the MP4 at all. The same gradient can run live as a React component that weighs about 50 KB of gzipped JavaScript, stays sharp at any size and follows your theme colours. In the editor, open Export → Code for the React snippet or the shadcn install command. Animated gradient background for shadcn/ui walks through it. Use the MP4 where code can't run: slides, video edits, email headers, social posts and digital signage. Background video vs animated gradient has measured file sizes for both.

Use it in slides and video edits

  • Keynote and PowerPoint: insert the MP4 and set it to loop until the next slide.
  • Premiere, Final Cut, DaVinci Resolve, After Effects: place the clip on the timeline and duplicate it end to end. Each copy starts on the frame after the previous one ended.
  • A single longer file: let ffmpeg repeat the loop without re-encoding. -stream_loop 5 plays the input 6 times, so a 10-second loop becomes 60 seconds:
ffmpeg -stream_loop 5 -i gradient-loop.mp4 -c copy gradient-60s.mp4
  • Vertical video: exports are 16:9. Gradients crop well, so cut a 9:16 strip from the middle for stories and reels. From a 1080p export this gives a 608×1080 video:
ffmpeg -i gradient-loop.mp4 -vf "crop=ih*9/16:ih" -c:v libx264 -crf 18 -pix_fmt yuv420p gradient-vertical.mp4

FAQ

Is there a watermark? No. No export from gradients.sh has one.

Can I use the video commercially? Yes. The free presets are MIT licensed. Pro presets come with a commercial license; see the license.

Why is my export shorter than the loop? You're on the free plan and Loop is set above 10 seconds. Set it to 10 or less and export again.

What are the Pro limits? MP4 up to 6K, or 4K at 60 fps, plus 1440p and 1080p at 120 fps where the browser supports them, with HEVC and AV1 as options. The pricing page has the details.

Related