Animated CSS Gradient Background

Create animated CSS gradient backgrounds with pure CSS keyframes — moving, breathing color with no JavaScript. Free generator and copy-paste code examples.

Open the animated gradient generator →

How animated gradients work

Animate the background-position of an oversized linear-gradient with a CSS @keyframes rule to make the colors drift. Keep the animation slow and the palette subtle so it reads as ambient motion rather than a distraction.