# Animated gradient backgrounds for video and social

[Canonical HTML page](https://gradiently.design/guide/animated-gradient-background)

An animated gradient can look like light moving through silk, or like a screensaver. The difference is a handful of design decisions you can make on purpose.

## 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.

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](https://gradiently.design/guide/css-animated-gradient) and [shader gradients](https://gradiently.design/guide/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 |

Pick one lead movement. A second, much subtler one can support it.

## 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.

- 0 s: dusk: `linear-gradient(160deg, #1e1b4b 0%, #6d28d9 60%, #f472b6 100%)`
- 3 s: `linear-gradient(160deg, #1e1b4b 0%, #7c3aed 50%, #fb7185 100%)`
- 6 s: warmest: `linear-gradient(160deg, #312e81 0%, #a855f7 45%, #fb923c 100%)`
- 12 s: back to dusk: `linear-gradient(160deg, #1e1b4b 0%, #6d28d9 60%, #f472b6 100%)`

Four moments of one slow colour shift. The last frame matches the first, so the loop can repeat without a jump.

Movement should also ease rather than tick along at one speed. Changes that start and end gently look natural; constant speed looks mechanical. [Easing](https://gradiently.design/guide/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.

- Blue to orange: grey middle: `linear-gradient(90deg, #2563eb 0%, #f97316 100%)`
- Via magenta: stays vivid: `linear-gradient(90deg, #2563eb 0%, #c026d3 50%, #f97316 100%)`
- Teal to lime: neighbours: `linear-gradient(90deg, #0f766e 0%, #22c55e 50%, #bef264 100%)`

Opposite colours blended directly pass through a muted grey. A stop in between, or neighbouring hues, keep the colour alive as it moves.

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](https://gradiently.design/guide/muddy-gradients). 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](https://gradiently.design/guide/text-on-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](https://gradiently.design/guide/seamless-loop-video) 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](https://gradiently.design/guide/gif-vs-mp4) explains the choice.

A vertical story announcing late openings all winter on a moving gradient

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](https://gradiently.design/guide/reels-tiktok-backgrounds).
- **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](https://gradiently.design/guide/video-background-website) 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.

## FAQ

### 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.