Build an animated gradient background in seconds. Choose up to six colors, the angle, speed and animation style, watch the live preview, then copy ready-to-use CSS with @keyframes and a reduced-motion fallback.
Last updated:
Palettes
Colors
2 to 6 colors. The first color is repeated at the end where needed so the loop is seamless.
Your gradient
CSS
Advertisement
Advertisement
How to use the CSS Gradient Animation Generator
Pick a palette or set your own colors; use the arrows to change their order.
Choose the animation style: Flowing shift works everywhere, while the rotating and conic styles spin the gradient itself.
Adjust angle, duration and size. Slow loops of 10 to 20 seconds feel calm; short loops feel energetic.
Set the class name you want to use in your page and keep the reduced-motion option on.
Copy the CSS and add the class to any element, or download the HTML demo to see it full screen.
@property registers an <angle>; keyframes turn it 360°
The gradient direction sweeps around
Browsers with @property (Chrome/Edge 85+, Safari 16.4+, Firefox 128+)
Spinning conic
conic-gradient(from var(--angle), …) with the same keyframes
A color wheel turning around the centre
Same as rotating angle
Choosing duration and colors
Duration: 10 to 20 seconds per loop suits page backgrounds; 3 to 6 seconds suits buttons, badges and loading states.
Neighbouring colors: similar hues (for example three blues and a teal) look calm and premium; contrasting hues look playful but can be busy.
Seamless loops: the shift style plays forwards and backwards within one loop, and the conic style repeats the first color at the end, so there is no visible jump.
Readability: keep text contrast at least 4.5:1 against every color in the palette, or add a semi-transparent overlay behind the text.
Using the CSS
Copy the CSS into your stylesheet and add the class to any block element, for example <section class="animated-gradient">. Give the element a height (or content) so the background is visible. For a static gradient without motion, the CSS gradient generator gives finer control over color stops, and the CSS animation generator covers movement effects such as fades and bounces.
Frequently asked questions
How do you animate a CSS gradient?
Browsers cannot smoothly interpolate between two gradient values, so animated gradients use a trick. The classic method draws the gradient several times larger than the element with background-size and animates background-position, so the colors appear to flow. The newer method registers a custom angle with @property and animates that angle inside the gradient.
Which browsers support animated gradients?
The flowing shift style uses only background-size and background-position, which work in every modern browser. The rotating and conic styles need @property, supported in Chrome and Edge 85+, Safari 16.4+ and Firefox 128+. The generated CSS includes a static background line first, so older browsers still show the gradient without motion.
Will an animated gradient slow down my page?
A single gradient background is light, but animating background-position repaints the element every frame. Keep it to one large section such as a hero banner, avoid stacking many animated layers, and prefer longer durations. The reduced-motion rule turns it off for users who ask their system for less motion.
What does the background size setting do?
In the flowing shift style the gradient is drawn larger than the element, for example 400% means four times wider and taller. Only part of it is visible at a time, and moving the background position reveals the rest. Larger sizes show fewer colors at once and make the movement look slower and softer.
How do I put text on top of an animated gradient?
Add the class to a container and place your content inside it. Use white or very dark text with a subtle text-shadow, and check the contrast against the lightest and darkest colors in your palette, because the background behind the text keeps changing.
What is prefers-reduced-motion?
It is a media query that is true when the user has turned on a reduce motion setting in their operating system. Motion can cause discomfort for some people, so the generated rule stops the animation for them and leaves a still gradient.
Are all the tools on FreeToolCabin tested for quality and accuracy?
Yes! Every tool on our site undergoes automated Q/A testing in real browser environments to ensure high precision, correct output, and zero errors. If you happen to spot a bug or have a suggestion, please contact us at [email protected] and our team will review it right away.