Animated gradient background

Colors shift smoothly via oversized gradient + animated background-position.

Living gradient

Widely Supported

animationcolorno-js

Quick implementation

.gradient-bg {
  background: linear-gradient(
    -45deg,
    oklch(0.45 0.25 265),
    oklch(0.50 0.20 310),
    oklch(0.55 0.18 180),
    oklch(0.45 0.22 145)
  );
  background-size: 400% 400%;
  animation: gradient-shift 8s ease infinite;
}

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

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

Prompt this to your LLM

Includes role, constraints, two framework variants, and edge cases to handle.

You are a senior frontend engineer building a hero section.

Goal: A smooth animated gradient background that cycles through colors — no JavaScript.

Technical constraints:
- Use linear-gradient with 4 color stops in oklch().
- Set background-size: 400% 400% to make the gradient larger than the element.
- Animate background-position to create the color shift effect.
- Duration: 8s ease infinite for a slow, ambient feel.
- Include @media (prefers-reduced-motion: reduce) to disable animation.

Framework variant (pick one):
A) Vanilla CSS class applicable to any container.
B) React component — accept colors (array of oklch strings) and duration props.

Edge cases to handle:
- Text on top must have sufficient contrast — use text-shadow or semi-transparent overlay.
- Animation should be subtle — too fast is distracting.
- Gradient must tile seamlessly (start and end at the same position).

Return CSS.

Why this matters in 2026

Animated gradients create visual interest on hero sections, landing pages, and app backgrounds without images or JavaScript. The technique is lightweight — a single CSS declaration plus a keyframe — and works everywhere.

The logic

The trick is background-size: 400% 400%, making the gradient four times larger than the element. The keyframes shift background-position from one corner to another, revealing different parts of the oversized gradient. Because the gradient has four stops arranged diagonally, the color shift appears smooth and organic.

Accessibility & performance

Animating background-position triggers paint (not layout), which is acceptable for large, low-frequency animations. For maximum performance, consider using @property to register a custom property and animate it with transform instead. Always provide prefers-reduced-motion fallback — ambient motion can trigger vestibular issues for some users.