OneTaskBy Tim King · Updated
Animated Gradient Background
Moving Gradient Background in Pure CSS, With Adjustable Angle and Speed
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Animated Gradient works
An animated gradient is a background whose colours slowly slide and blend into each other, giving a hero or banner gentle movement without images or video. Pick the colours, angle and speed, then copy the pure CSS.
A moving gradient draws the eye without distracting from the words on top of it. It weighs almost nothing compared with a background video and works in every modern browser.
How the animated gradient works
The gradient is drawn four times larger than the section with background-size: 400% 400%, so
only part of it shows at once. A keyframe animation then slides background-position from one
side to the other and back, so the visible window drifts across the colours. Using more colours
gives a richer blend, and a longer cycle makes the motion calmer.
Accessibility
Keep enough contrast between the text and every colour in the gradient, since each one passes behind the heading at some point. Visitors who ask for reduced motion see the gradient standing still, with the animation switched off by a media query.
FAQ
Does the animated gradient need JavaScript?
No. The whole effect is a CSS background and a keyframe animation, so it works with JavaScript turned off and adds nothing to your script bundle. Paste the CSS and the class does the rest.
Is animating background-position bad for performance?
It repaints the section each frame, which is fine for one hero on a page. For a full screen gradient on low powered phones, a longer cycle and fewer colours keep it smooth enough.
Can I use the animated gradient on text instead?
Yes. Apply the same background and animation to a heading, then add background-clip: text and
color: transparent. The gradient text generator on this site builds that version for you.
How do I make the gradient move faster or slower?
Change the cycle length. It sets how many seconds one full sweep across the colours takes, so a lower number moves faster and a higher number drifts slowly in the background.
See also: all Shadows & Motion tools, Layout & Spacing, Shapes & SVG, UI Components, Forms & Inputs, Colour.
Related tools
Gradient Maker
Linear, radial and conic CSS gradients with live preview.
Mesh Gradient Generator
Pure-CSS mesh gradients from stacked radial layers.
Aurora Background
Make a soft northern lights glow that drifts behind a section.
Gradient Text Generator
Fill headline text with a CSS gradient and copy the code.
Hero Section Builder
Landing page hero sections with fluid headline and buttons.