Gradients Studio

Animated Gradient Background Generator

Turn any gradient into a seamless MP4 loop, free up to 1080p, right in your browser. Pick a gradient, press Animate, choose how long it runs, and export. Pro takes it to 4K at 60 fps with no end card.

Open the studioHow it works

Free MP4 up to 1080p · 4K and 60 fps on Pro · 5 to 30 s loops

Loops made in the studio

Each one ends exactly where it began, so it can play forever without a jump.

RaysSoft light falling through a dark sky.
AuroraBands of colour drifting like the northern lights.
Soft glowA calm, blurred glow that slowly shifts.
CloudsSlow clouds of colour folding into each other.

From still to loop in four steps

No timeline to set up and no keyframes. The studio works out the motion and the loop for you.

  1. 01

    Pick a gradient

    Choose a style and a palette, or start from one of ours. Set the frame shape to where the video will play.

  2. 02

    Press Animate

    It sits under the selected frame. The frame starts to move right away, and the Motion panel opens on the right.

  3. 03

    Set the loop

    Speed is Calm, Steady or Lively. Length runs from 5 to 30 seconds. Rate is 30 or 60 frames a second; 60 is on Pro.

  4. 04

    Export video

    Sign in with a free account. Your browser draws every frame and saves an MP4, and you can keep working while it renders.

Sized for where it plays

The video takes the frame's shape. On Pro the MP4 comes out at these sizes; free exports keep the same shape at up to 1080p.

FramePro sizeGood for
16:93840 × 2160Website hero, slides, App Store event card
21:93840 × 1646App Store product page header
3:23456 × 2304App Store search result
1:12160 × 2160Square feed post
4:51728 × 2160Tall feed post
9:161216 × 2160Stories, Reels, event details

A video file this sharp has a size limit, so shapes that would be bigger, like 3:2, come out a little smaller at exactly the same shape.

Where a gradient loop works

Anywhere a still background feels flat and a full video feels like too much.

  • App Store header

    Apple’s header video is exactly 3840 × 1646 and runs 5 to 30 seconds, so it needs a Pro export. Set the frame to 21:9 and the Motion panel marks it Header-ready. Sizes and safe zones are on the App Store header size page.

  • Launch post

    A short loop behind your product name gives the post some life without turning it into a full video. Make the poster with the free launch kit, then animate it: the logo and words come in, hold, and step out before the loop comes round.

  • Deck slide

    Drop the MP4 onto a title slide in Keynote or PowerPoint and set it to loop. A 16:9 frame fills the slide.

  • LinkedIn post

    Post it as a native video at 1:1 or 4:5, so it fills more of the feed than a wide clip.

  • Website hero

    Use the MP4 as a background video behind your headline. Export the same frame as a JPG too and set it as the poster, so the page shows colour before the video loads.

  • hero.html
    <video autoplay muted loop playsinline poster="hero.jpg">
  <source src="hero.mp4" type="video/mp4">
</video>

    Muted and playsinline let it start on its own on phones. Use a Pro export here, so the loop never stops for the end card, and run it through a video compressor first: it is saved at high quality, not small size.

No After Effects needed

You do not need After Effects, a timeline or keyframes to make a looping gradient.

In After Effects, a clean loop means matching the last frame to the first by hand. Here the motion is built to come back to its exact starting point, so the last frame leads straight into the first with no fade to hide a jump. The studio also picks a sharp video setting for the size and saves a standard MP4 that plays almost everywhere.

After Effects is still the right tool when you need your own motion path, timing per shape, or sound. For a calm moving background, this is faster.

More generators

Want a still instead? Start from a gradient background or a grainy gradient, and press Animate later.

Questions

Is the loop really seamless?
Yes. The gradient drifts and comes back to exactly where it started. The frame that would match the first one is never drawn twice, so there is no pause or flash where the video starts again. Free exports end with a short card after the loop, so when the file plays again it jumps once from the card back to the start. Pro files have no card and loop with no break.
Can I make an animated gradient video for free?
Yes. Sign in with a free account and export MP4 loops up to 1080p at 30 frames a second. Free videos end with a 1.5 second "Made with gradients.studio" card. You can press Animate and watch the loop with no account at all.
What does Pro add to video?
4K (3840 × 2160 for a 16:9 frame), 60 frames a second, and no end card. Pro is $39 for 12 months, one payment that never renews, or $9 for a Week Pass of 7 days.
What file do I get?
An MP4 video using H.264, the format almost every app, browser and phone plays. It has no sound. There is no GIF, WebM or CSS export.
How long can the loop be?
From 5 to 30 seconds, in whole seconds. New loops start at 6 seconds. Apple's in-app event videos need at least 15, and the Motion panel offers a one-tap 15 s button on those shapes.
Should I pick 30 or 60 fps?
30 frames a second is smooth for a slow gradient and renders faster. 60, on Pro, is smoother on fast motion and high refresh screens, and takes about twice as long to render.
Which browsers can export the video?
Chrome or Safari on a computer. The render uses your browser's built-in video encoder. On a browser without one, the loop still plays, and the panel tells you to open the studio on a computer to save the file.
Can my logo and text move too?
Yes, on posters made in the studio. The gradient loops, and your logo and words arrive in turn, hold, then step out before the loop comes round.
Can I use the videos in client and commercial work?
Yes. Everything you export is yours to use in client work and in products you sell, with no credit needed.

Make one now

Open the studio, press Animate under the frame, then Export video.

Open the studio