Online Tool Store
Animated CSS Gradient Generator
Pick two or more colors, an angle, and a speed to generate a CSS @keyframes gradient animation, with ready-to-copy CSS for your background.
🔒 This tool runs entirely in your browser. Your files are never uploaded to a server.
Animated CSS Gradient Generator
Live preview
CSS
How the Animated CSS Gradient Generator works
- Pick two or more colors, an angle, and a background size — the preview and CSS update on every change.
- The tool builds a linear-gradient() sized larger than the element and animates its background-position with @keyframes.
- Copy the generated CSS block and paste it onto any element's class in your stylesheet.
The method
A gradient looks static until its background is drawn larger than the box and the visible window into it is moved. Setting background-size above 100% gives the gradient room to shift, and animating background-position from 0% to 100% and back creates a smooth, looping flow.
background: linear-gradient(angle, color1, color2, …); background-size: size% size%; animation: move speed ease infinite;
Example: a 135° gradient across three colors, sized at 300%, animating over 8 seconds, produces a gentle diagonal color flow — exactly the sample loaded above.
FAQ
How does the gradient actually animate with pure CSS?
The generated CSS sets a background-size larger than 100% and shifts background-position back and forth in a @keyframes rule, so the gradient appears to flow across the element without JavaScript or repainting the whole page.
Can I use more than three colors?
The widget ships with three color pickers for a smooth default transition, but you can edit the copied CSS and add more comma-separated colors to the linear-gradient() call directly — the animation keyframes work unchanged.
Does this tool store or upload the colors I pick?
No. Every color, angle, and speed value lives only in this page's memory while it's open — nothing is sent to a server, and refreshing the page resets to the sample gradient.
How we compare
| Feature | Online Tool Store | Hand-written @keyframes | A generic online tool |
|---|---|---|---|
| Live preview while you tweak colors | ✓ | ✗ | ✓ |
| Copy-ready CSS, no manual keyframe math | ✓ | ✗ | ✓ |
| No sign-up or watermark | ✓ | ✓ | ✗ |
Skip working out background-size and keyframe percentages by hand — pick colors, watch the preview animate, and copy the CSS straight into your stylesheet.