An animated background adds motion to a home screen, a website hero, or a slide, and it reads as far more premium than a flat image. The good news is that you can make one in a couple of minutes with no code, or in a few lines of CSS if you want it running on your own site. Here are the three ways to do it, from easiest to most technical, plus where to grab ready-made ones free.
Make one in 30 seconds
Open Gradient Lab to build an animated gradient background right in your browser, or grab a ready-made one free.
The three ways to make an animated background
Each suits a different job. Pick by where the background is going and how much control you want over it.
1. No-code: build one in Gradient Lab
The fastest route. Gradient Lab is a free, in-browser tool that animates a gradient shader in real time. No account, no install. In a minute you can have a looping background ready to export.
- Open Gradient Lab and pick a shader mode (soft mesh, aurora, plasma, and more).
- Click any colour to set your palette, and add or remove colour points.
- Set the animation speed and the aspect ratio for wherever it's going.
- Export a still PNG or an animated video (MP4 or WebM) at up to 4K, with no watermark.
2. CSS: an animated gradient background
If you want the animation to run on your own site with no video file, a few lines of CSS can animate a gradient's position. Drop this on any element:
.animated-bg {
background: linear-gradient(120deg, #e33d5e, #7d2df0, #2d7bf0, #e33d5e);
background-size: 300% 300%;
animation: gradientShift 18s ease infinite;
}
@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}It slides a multi-stop gradient across the element forever. Keep the duration slow (18 seconds or more) so it feels ambient rather than distracting, and test it on mobile, since large repainting gradients can cost battery.
CSS gradients are lightweight but limited to simple colour motion. For depth, grain, or organic movement, export a video from Gradient Lab and use that as the background instead.
3. Video: an MP4 background
For a website hero or a product mockup, a looping MP4 gives the richest motion. Export one from Gradient Lab, or use a ready-made clip from the Animated Backgrounds collection, then set it as a muted, autoplaying, looping video element behind your content. The animated backgrounds ship as MP4 for exactly this.
Where to use an animated background
- Website hero sections, where subtle motion makes a page feel alive.
- Video-call and Zoom backgrounds.
- Social posts, reels, and story backgrounds.
- Product mockups and app demos.
- A live wallpaper for a phone or desktop.
Get animated backgrounds, free
Make your own in Gradient Lab, download ready-made shader gradients, or browse the animated MP4 collection. No signup to start.
