Animated Gradient Maker

Gradients that breathe

Make gradients that pulse, flow, and drift in your browser. Design and preview for free; export animated files with Pro.

Make an animated gradient

How to make an animated gradient

Build your palette
Choose a gradient type in Design, then set your colors and canvas size. Start with a simple palette so you can see what the motion changes.
Choose a motion in Animate
Try Breathe for gentle expansion or Flow for continuous motion. Adjust Intensity to change its strength and Loop to set a cycle from 2 to 60 seconds. Use Play and Pause to compare the moving and still result.
Preview, then export
With Pro, choose MP4, WebM or GIF in Export. Start with an export Duration that matches your Loop, then replay the downloaded file to check the join. Custom motion settings can affect how smoothly it repeats.

Making a website background? Follow the animated gradient background guide for video markup, a still poster and reduced-motion handling.

BREATHE

Animation Built In

Start with Breathe for slow expansion, then adjust the intensity. Preview your changes in the editor as you shape the motion.

Motion Studies

Find your kind of motion.

Five separate gradient studies, not frames from a single animation. Your palette and gradient type change how each motion feels.

Breathe · Radial

Flow · Aurora

Pulse · Spiral

Drift · Mesh

Sway · Conic

Start with a preset, then explore the controls for your gradient. Camera controls adjust rotation, scale and movement; available structure controls depend on the gradient and effects you choose.

Change one setting at a time and watch a full cycle before exporting. For a background behind text, start with lower intensity so the content stays easy to read.

IIwantedwantedanimationanimationfromfromdaydayone.one.NotNotasasaafeaturefeatureyouyouboltboltononafter—asafter—asthethefoundation.foundation.EveryEveryslider,slider,everyeveryeffect,effect,everyeverymaterialmaterialwaswasbuiltbuiltwithwiththethequestion:question:howhowdoesdoesthisthislooklookwhenwhenit moves?it moves?

Export

MP4. WebM. GIF.
Animated export with Pro.

MP4 is a practical starting point for a video background. WebM is another video option; GIF can work where video is not supported, but its limited palette can produce visible bands in smooth gradients.

These are rendered animation files, not editable CSS or GLSL shader code. Free exports are watermarked PNG stills; MP4, WebM and GIF require Pro.

Compare gradient export formats and limits