Animated CSS Gradient Background: Code, Examples and Generator Guide

Quick answer: A common animated-gradient technique uses a multi-color CSS gradient, makes the background larger than the element, and animates background-position with @keyframes.

.animated-gradient {
  background: linear-gradient(120deg, #7c3aed, #06b6d4, #f43f5e);
  background-size: 200% 200%;
  animation: gradientMove 8s ease infinite;
}

@keyframes gradientMove {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

How the Animated Gradient Works

1. linear-gradient() creates the colors.
2. background-size makes the generated background larger than the visible element.
3. @keyframes changes the background position.
4. animation controls duration, timing and repetition.

Full HTML and CSS Example

<div class="gradient-hero">
  <h2>Animated Gradient</h2>
</div>

<style>
.gradient-hero {
  min-height: 320px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #2563eb, #7c3aed, #db2777);
  background-size: 220% 220%;
  animation: moveGradient 10s ease infinite;
}

@keyframes moveGradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
</style>

How to Make the Animation Slower or Faster

Change the duration in the animation declaration. A larger number such as 15s produces slower movement; a smaller number such as 4s produces faster movement.

How to Change the Gradient Direction

Change the angle in linear-gradient(). For example, 90deg runs horizontally while 180deg runs vertically. For more static-gradient examples, see our CSS Gradients guide.

Respect Reduced-Motion Preferences

Continuous decorative movement can be distracting for some users. Provide a non-animated version when the operating system reports a reduced-motion preference:

@media (prefers-reduced-motion: reduce) {
  .animated-gradient {
    animation: none;
  }
}

Performance Considerations

Animating background properties can require repeated painting. Test the effect on the devices you support, especially when covering large areas. If an animation causes visible jank, simplify the effect, reduce the animated area or consider an implementation based on transform/opacity layers that can be cheaper to animate in many rendering scenarios.

Gradient Background vs Gradient Text

A gradient background fills an element’s box. Gradient text requires clipping a background to the text itself. See our CSS Gradient Text guide for that technique.

Using a Gradient From Figma

First reproduce the static gradient accurately, then add animation. Our Figma Gradient to CSS guide explains how to translate colors and stops before animation.

Common Problems

• Nothing appears to move: make sure the background is larger than the visible area.
• Movement is too aggressive: increase animation duration and reduce background travel.
• Text becomes unreadable: adjust colors or add an overlay so contrast remains sufficient throughout the animation.
• Animation jumps: make the first and final keyframe states compatible for a seamless loop.

Frequently Asked Questions

Can I animate a radial gradient?

Yes, although the best technique depends on which part of the effect you want to move. You can animate background position or use layered elements for more complex effects.

Can I use more than three colors?

Yes. Add additional color stops, but keep readability and visual complexity in mind.

Should every gradient animate?

No. Static gradients are often clearer and cheaper to render. Use animation when it serves the design rather than adding motion by default.

Last reviewed: October 2026.