Backgrounds that move
Free animated gradient background generator
Build a moving background in your browser, then copy it as one HTML file or a React component, or drop it behind a device mockup. Runs on your GPU. Nothing is uploaded.
Start from a look
How it works
- Step 1
Pick a look
Start from one of the presets, or choose a shape (aura, flow, marble, ribbons, rings, waves, cells or sunburst) and set your own five colours.
- Step 2
Melt it
Warp, scale and twist the pattern, then stack effect layers: grain, bloom, halftone, dither, liquid glass, ASCII and more. Drag them to change the order.
- Step 3
Take it anywhere
Copy a self-contained HTML file or a React component for your site, or send the background straight to the editor and frame it in a device.
What you can make
- A hero or header background that loops forever, as a single file
- A calm, grainy wallpaper for a talk, a deck or a desktop
- Print-style halftone and dither textures for posters and covers
- Liquid-glass flutes, tiles and beads behind a product screenshot
Questions
Does the animation loop without a jump?
Yes. Every moving part of a background is driven by whole turns around a circle, so the last frame lines up with the first. That makes it safe for a website header, a talk or a video.
What do I get when I export code?
The HTML export is one file with the shader and a small runtime inline: no network, no dependencies. The React export is a single component that fills its parent. Both fall back to a still gradient where WebGL2 isn't available, and hold a still frame for visitors who prefer reduced motion.
Can I use it as a device mockup background?
Yes. Choose Frame in a device and the editor opens with this background already applied, ready for a screenshot in a phone, laptop or browser frame.
Is it free?
The studio and the first look are free. The other looks are part of MockFrame Pro, which also covers video export.