Animated Gradient Generator

An animated gradient is a CSS gradient whose colour stops or position shift over time, producing a smooth, looping background animation without JavaScript or images. The technique became ubiquitous on SaaS marketing pages in the early 2020s because it suggests motion and freshness while costing essentially nothing in terms of bandwidth or runtime.

Underneath, the animation is a single CSS rule. The trick is to declare a gradient with a background-size larger than the element (say 400 percent by 400 percent), then animate the background-position. The browser composites the result on the GPU, so the animation runs at 60 fps even on low-end phones. No JavaScript framework, no canvas, no video file.

More elaborate effects (waves, blobs, 3D surfaces) cannot be expressed in pure CSS and need an MP4 or WebM video instead. The studio exports both formats with seamless looping, and the React component export embeds a live renderer directly in your app for interactive use.

The animation has three moving parts: the gradient, the oversize background, and the keyframe rule that moves the background. Here is the minimum code that produces a looping animated gradient:

.hero {
  background: linear-gradient(120deg, #6366f1, #ec4899, #f59e0b, #6366f1);
  background-size: 400% 400%;
  animation: shift 12s ease-in-out infinite;
}

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

Three things to notice:

• The first and last colour stops are the same. This guarantees the animation loops without a jump.
• The keyframe positions return to the same value at 0 percent and 100 percent. Same reason.
• The background-size is intentionally larger than the element. The animation pans across the oversized gradient; the visible portion is the slice your container holds.

You can swap linear-gradient for radial-gradient or conic-gradient. The same background-position technique works on all three.

The free editor takes care of the maths for you. You pick colours and timing; it generates the CSS.

1. Open the animated gradient editor. Go to the free animated gradient generator. The canvas opens with a smooth two-tone animation running so you can see the engine working immediately.
2. Pick colour stops. Add between 2 and 10 colours to the gradient. Drag each stop along the axis to change where it sits.
3. Set duration and easing. Pick how long one loop should take (2 seconds to 60 seconds). Choose an easing curve: linear for constant speed, ease-in-out for natural motion, or a custom cubic-bezier.
4. Export. Copy clean CSS with @keyframes for use anywhere, export an MP4 or WebM video, or grab a React component.

Classic three-tone hero, slow drift

.hero {
  background: linear-gradient(135deg, #6366f1, #ec4899, #f59e0b, #6366f1);
  background-size: 300% 300%;
  animation: hero-shift 10s ease-in-out infinite;
}

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

Vertical radial loop for cards

.card {
  background: radial-gradient(ellipse at top, #0ea5e9, #8b5cf6, #0f172a);
  background-size: 100% 200%;
  animation: card-pulse 8s ease-in-out infinite alternate;
}

@keyframes card-pulse {
  from { background-position: 50%   0%; }
  to   { background-position: 50% 100%; }
}

Conic loop for ring elements

.ring {
  background: conic-gradient(from 0deg, #ff7e5f, #feb47b, #ff7e5f);
  animation: ring-spin 14s linear infinite;
}

@keyframes ring-spin {
  to { transform: rotate(360deg); }
}

React component (TypeScript, no dependencies)

'use client'
import { CSSProperties, ReactNode } from 'react'

const styles: CSSProperties = {
  background: 'linear-gradient(135deg, #6366f1, #ec4899, #f59e0b, #6366f1)',
  backgroundSize: '300% 300%',
  animation: 'hero-shift 10s ease-in-out infinite',
  minHeight: '100vh',
}

export function AnimatedHero({ children }: { children: ReactNode }) {
  return (
    <>
      <style>{
        '@keyframes hero-shift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }'
      }</style>
      <section style={styles}>{children}</section>
    </>
  )
}

CSS animation handles 90 percent of marketing-page gradient needs. The remaining 10 percent (complex shader effects, true 3D motion, particle systems) cannot be expressed in CSS and must be exported as video.

Rule of thumb:

• CSS keyframes for any gradient made of linear, radial, or conic colour blends.
• MP4 / WebM video for blob, metaball, ripple, morph, 3D, particle, scene, smoke, and neural modes. These rely on WebGL shaders that have no CSS equivalent.

The studio supports MP4 export on Pro and Studio plans, with WebM as a smaller-file alternative. WebM is better for the web; MP4 has wider compatibility (use it for Slack, email, and older devices). Both export at 1080p on Pro, 4K on Studio, with seamless looping.

Animating background-position is one of the cheapest things you can do on the web. Modern browsers composite the result on the GPU and skip the layout and paint phases entirely, so a single animated gradient costs roughly the same as a static gradient.

What is expensive:

• Animating background-color. Triggers a full paint on every frame.
• Animating filter values like blur or saturate. Triggers compositing recalculation.
• Multiple stacked animated gradients on overlapping elements. Compounds GPU work; can drop frame rate on phones.

Stick to animating background-position (or transform: rotate for conic gradients) and you can run dozens of animated gradients on one page without measurable cost.

About 5 to 10 percent of users have reduced-motion turned on at the OS level, either because they get motion sickness, have a vestibular disorder, or just find moving backgrounds distracting. Showing them a constantly-shifting gradient is a real accessibility failure, and Apple penalises sites that ignore the preference in App Store ratings on visionOS.

The fix is one media query:

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

The Gradients.design React export does this automatically. For raw CSS exports, add the media query manually before deploying.

A short list of sites running animated gradients in production:

• Linear: animated radial gradient behind the hero on the homepage, runs at 16 seconds per cycle.
• Anthropic: subtle animated gradients on the Claude product page hero.
• Vercel: pricing-page background uses an animated gradient with a tight palette.
• Stripe: marketing hero rotates a slow animated mesh; the site exports as both CSS animation and as a video fallback.
• GitHub Copilot: pricing page background features a particle-style animated gradient.

1. Too short a loop. Sub-3-second loops feel agitating. Aim for 6 to 12 seconds for hero sections.
2. Not closing the loop. If the first and last keyframe values do not match, the animation jumps every cycle. Either match them or use animation-direction: alternate.
3. Animating the wrong property. background-color and filter trigger paint and compositing. Stick to background-position and transform.
4. High saturation everywhere. Saturated colours moving against each other create visual fatigue. Pick one accent against muted neighbours.
5. Ignoring reduced-motion. Wrap the animation in the media query. Five lines of CSS, big accessibility win.