How do you animate a CSS gradient background smoothly?

The gradient is rendered at a background-size much larger than the element (300-400%), and a @keyframes animation moves background-position back and forth between corners, so different parts of the oversized gradient scroll into view over time — the element itself never resizes or repaints its actual gradient stops.

Will this hurt performance on a full-page hero section?

Animating background-position is relatively cheap since it doesn't trigger layout, but on very large elements it can still cost a noticeable repaint on lower-end devices — adding will-change: background-position and keeping the animation duration slow (8s or more) both help keep it smooth.

How many colors should I use?

Three to four stops give the smoothest sense of continuous motion; two stops can look like it's just fading back and forth rather than genuinely moving, and more than five tends to muddy into a less distinct gradient.

Can I use this behind text or other content?

Yes — apply the class to a full-width section or div and position your content on top with normal stacking (position: relative and a higher z-index, or just flow content inside the same element), since the gradient is just a background and doesn't affect layout.

Does this respect reduced-motion preferences?

Yes — the generated CSS wraps the animation in @media (prefers-reduced-motion: reduce) so it freezes on a single frame of the gradient for visitors who've asked for less motion, and everything is computed locally in your browser.

ANIMATED GRADIENT BACKGROUND GENERATOR

Build a slow-moving gradient background for hero sections and banners — calculated right here in your browser.

Color stops

Angle: 120deg

Spread: 300%

Speed: 10s

Presets

HTML

<!-- Wrap your hero or banner content inside this element -->
<div class="animated-gradient-bg">
  Your content here
</div>

CSS

.animated-gradient-bg {
  background: linear-gradient(120deg, #ff512f, #f09819, #ff9966);
  background-size: 300% 300%;
  animation: gradient-shift 10s ease infinite;
}

@keyframes gradient-shift {
  0% { background-position: 6.7% 25%; }
  50% { background-position: 93.3% 75%; }
  100% { background-position: 6.7% 25%; }
}

@media (prefers-reduced-motion: reduce) {
  .animated-gradient-bg {
    animation: none;
    background-position: 50% 50%;
  }
}

How to build an animated gradient background

1
Pick a color preset or set your own 2-5 gradient stops.
2
Set the angle for the gradient's direction.
3
Increase background-size for a slower, wider drift, or reduce it for a tighter, faster-feeling motion.
4
Set the animation speed.
5
Copy the HTML and CSS and apply the class to your hero section or banner.

Questions

How do you animate a CSS gradient background smoothly?: The gradient is rendered at a background-size much larger than the element (300-400%), and a @keyframes animation moves background-position back and forth between corners, so different parts of the oversized gradient scroll into view over time — the element itself never resizes or repaints its actual gradient stops.
Will this hurt performance on a full-page hero section?: Animating background-position is relatively cheap since it doesn't trigger layout, but on very large elements it can still cost a noticeable repaint on lower-end devices — adding will-change: background-position and keeping the animation duration slow (8s or more) both help keep it smooth.
How many colors should I use?: Three to four stops give the smoothest sense of continuous motion; two stops can look like it's just fading back and forth rather than genuinely moving, and more than five tends to muddy into a less distinct gradient.
Can I use this behind text or other content?: Yes — apply the class to a full-width section or div and position your content on top with normal stacking (position: relative and a higher z-index, or just flow content inside the same element), since the gradient is just a background and doesn't affect layout.
Does this respect reduced-motion preferences?: Yes — the generated CSS wraps the animation in @media (prefers-reduced-motion: reduce) so it freezes on a single frame of the gradient for visitors who've asked for less motion, and everything is computed locally in your browser.