The short version
- An animated gradient background is a colour blend that moves over time, usually by drifting position, changing shape, shifting hue or breathing light.
- Calm animated gradients move one or two properties slowly, taking several seconds or more for a full cycle; moving everything at once looks busy.
- Colours that sit near each other on the colour wheel animate cleanly, while opposite colours can pass through grey as they blend.
- Text over an animated gradient must be readable at every moment of the loop, including the brightest and darkest frames.
- For social and video, export animated gradients as seamless loops in MP4, with a still image for places that don't play video.
On this page
An animated gradient background is a blend of colours that moves: it drifts across the frame, changes shape, shifts hue or brightens and dims, usually in a loop behind words or a product. The best ones look like light moving through a material. The weak ones look like a screensaver. What separates them is not software but a few choices about what moves, how fast and in which colours.
This guide is about the design side, for video, social posts and screens. If you are building one in code for a website, see animated gradients in CSS and shader gradients.
What can move in an animated gradient
Every animated gradient is some combination of five kinds of change. Most good ones use one, sometimes two. Using all five at once is the fastest way to make a background feel restless.
| What moves | What you see | Feels |
|---|---|---|
| Position | The whole field glides or drifts | Calm, spacious, cinematic |
| Shape | Pools of colour swell, fold or flow into each other | Organic, liquid |
| Hue | Colours lean one way and back, or travel round the wheel | Seasonal, playful, energetic when fast |
| Light | Brightness breathes in and out | Quiet, luxurious |
| Grain and particles | Fine texture shimmers or drifts over the colour | Tactile, filmic, atmospheric |
How fast an animated gradient should move
Speed decides most of the mood. Slow movement reads as expensive and confident; fast movement reads as urgent. For a background behind words, a full cycle of change usually wants to take many seconds, not one or two. If you can clearly follow the motion while reading the headline, it is probably too fast.
Movement should also ease rather than tick along at one speed. Changes that start and end gently look natural; constant speed looks mechanical. Easing explains why, with examples.
Colours that animate well
Animation shows you every in-between colour of a gradient, one after another. A still gradient can hide a dull midpoint in a thin band; a moving one lingers on it. The safest palettes are analogous: neighbours on the colour wheel, like indigo, violet and pink, or teal, green and lime. Their in-between colours stay vivid.
If you need opposite colours, route them through a bridge colour, as in the middle example, or read why gradients go grey in the middle. Keep one colour as the ground that never changes much, usually the darkest. It anchors the motion and gives the words a stable place to sit.
Keeping text readable over a moving gradient
Text on a still gradient only has to read against one background. Over an animated gradient it has to read against every frame of the loop. The classic failure is a headline that is perfectly clear at the start and disappears for two seconds when a bright pool of colour drifts behind it.
Avoid
- Checking contrast on the first frame only
- Bright pools of colour drifting through the words
- Moving the text as well as the background
- Large hue cycles behind body-size text
Do
- Scrub through the loop and check the brightest and darkest moments
- Keep the calmest part of the field behind the words
- Hold the words still and let the colour move
- Save strong colour changes for backgrounds with short headlines
Some tools help here. In Gradiently the Mark behind a design knows where the words are, and its calmest, best-contrasting region stays behind them as it moves. For the general principles, see how to put text on a gradient.
How to design an animated gradient, step by step
- 1
Design the still frame
Choose the ground, three to five colours and the layout of the words. It should work as a still image before it moves.
- 2
Choose one lead movement
Drift, flow, a hue shift or breathing light. Match it to the brand: calm brands drift, lively brands can flow or swirl.
- 3
Set a slow pace
Start slower than feels natural and speed up only if the motion is hard to notice.
- 4
Make it loop
The last frame must lead back into the first. Seamless loops covers how.
- 5
Check every moment
Scrub through the loop and pause at the brightest and darkest points to check the words.
- 6
Export for the place it will play
MP4 for social and websites, a GIF only for email, and a PNG still for everywhere else. GIF vs MP4 explains the choice.
A vertical story is the natural home for an animated gradient: short words held still, colour moving behind.
Where animated gradient backgrounds work best
- Stories and reels, where video is expected. Keep words inside the safe zones; see backgrounds for Reels and TikTok.
- Feed posts for announcements and offers, where motion sets the post apart.
- Website heroes, as a short muted video or a live background, with a still fallback. Video backgrounds on websites covers the details.
- Stage and shop screens, where long, slow loops play for hours.
- Video intros and outros, as a quiet field behind a title.
If you use Gradiently, every design can be exported as a 5 to 30 second loop: choose a movement such as Drift, Flow, Breathe or Swirl, a pace, how the colour behaves and whether particles drift over it. The loop is made so its end meets its start.
Questions people ask
What is an animated gradient background?
It is a colour blend that moves over time, drifting, flowing, shifting hue or breathing light, usually as a loop behind words, products or video.
How fast should an animated gradient move?
Slowly, for most backgrounds. A full cycle of change should take many seconds, and you shouldn't be able to follow the motion comfortably while reading the headline.
Which colours are best for an animated gradient?
Neighbouring hues, such as indigo, violet and pink, animate most cleanly. Opposite colours need a bridge colour between them, or they pass through grey.
How do I keep text readable on an animated gradient?
Check the words at the brightest and darkest moments of the loop, keep the calmest part of the field behind them and keep the text still.
What format should I export an animated gradient in?
MP4 for social platforms and websites. Use GIF only where video doesn't play, such as email, and keep a still PNG as a fallback.
Written by Gradiently
The team behind Gradiently, a design tool built around Marks: living gradients that make everything you design look like yours.
See our profile
