Animated Gradient Generator

Create beautiful animated gradients. Pick your colors, preview in real UI components, and copy the CSS — all in one place.

Gradient Settings

Gradient colors

Linear gradient direction

8s
Fast (1s)Slow (15s)

Animated Gradient Preview

Animated Gradient Background

This gradient animates smoothly across the background. The animation shifts the gradient position continuously for a dynamic effect.

Export Animated Gradient CSS

  .animated-gradient {
    background: linear-gradient(90deg, #b80f5e);
    background-size: 200% 200%;
    animation: gradient-shift 8s ease infinite;
  }

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

Animated gradient border

Card with Animated Gradient Border

This card demonstrates an animated gradient border effect using a ::after pseudo-element. The border smoothly transitions through the gradient colors.

 .animated-gradient-border {
    --border-width: 3px;
    --gradient-angle: 90deg;
    --animation-duration: 8s;
    background: white;
    position: relative;
    border-radius: 0.5rem;
  }
  .animated-gradient-border:after {
    content: '';
    position: absolute;
    top: calc(-1 * var(--border-width));
    left: calc(-1 * var(--border-width));
    height: calc(100% + var(--border-width) * 2);
    width: calc(100% + var(--border-width) * 2);
    background-image: linear-gradient(
      var(--gradient-angle), #b80f5e);
    background-size: 200% 200%;
    border-radius: calc(0.5rem + var(--border-width));
    z-index: -1;
    animation: gradient-shift var(--animation-duration) ease infinite;
  }

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

How to Create an Animated Gradient

  1. Pick your colors — choose 2 or 3 gradient colors using the color pickers above. Contrasting colors create more dramatic animations.
  2. Set the direction — select one of 8 gradient directions using the direction pad (left to right, top to bottom, diagonal, and more).
  3. Adjust the speed — use the animation speed slider (1s to 15s) to control how fast the gradient shifts. Slower speeds work well for backgrounds, faster speeds for attention-grabbing elements.
  4. Preview the result — see your animated gradient applied to a full-width background and a border effect in real time.
  5. Copy the CSS — click the copy button on any preview to get the complete CSS code, including the keyframe animation.

What Are CSS Animated Gradients?

CSS animated gradients are backgrounds that smoothly transition their color positions over time using @keyframes and background-size. The technique works by creating a gradient larger than the element (typically 200-400% of its width) and animating the background-position property to shift the visible portion. This creates the illusion of flowing, moving colors without any JavaScript.

Animated gradients are widely used for hero sections, loading indicators, call-to-action buttons, and card borders. Because the animation runs entirely in CSS, it performs well and works across all modern browsers including Chrome, Firefox, Safari, and Edge.

Animated Gradient Borders with CSS

Animated gradient borders use a layered approach: a pseudo-element (::after) with the animated gradient sits behind the element, and the element itself has a solid background with slight inset. The visible gap between the inner background and the outer animated gradient creates the border effect. This technique avoids the limitations of border-image, which does not support border-radius.

Frequently Asked Questions

How do I make a gradient animate in CSS?
Set background-size to a value larger than 100% (e.g., 200%) and use a @keyframes animation that shifts background-position from 0% to 100%. The browser interpolates the position smoothly, making the gradient appear to move.
Do animated gradients affect performance?
Animating background-position does trigger repaints, but the impact is minimal for most use cases. Avoid applying animated gradients to very large areas on low-powered devices. For best performance, keep the element size reasonable and use will-change: background-position to hint the browser.
Can I use animated gradients with Tailwind CSS?
Tailwind doesn't include animated gradient utilities out of the box, but you can add custom keyframes and animation classes in your tailwind.config.js. Define the keyframe animation under theme.extend.keyframes and reference it in theme.extend.animation.
How do I control the animation speed?
The animation speed is set by the animation-duration property. A value of 1-4 seconds creates a fast, energetic effect. For subtle background movement, use 8-15 seconds. This generator lets you adjust the speed from 1s to 15s with a slider and see the result instantly.

More Gradient Tools

SVG Fill Gradient ConverterConvert any SVG to a gradient-filled SVG with linear or radial gradients.SVG Wave GeneratorGenerate customizable SVG wave dividers with gradient colors for your website.Tailwind CSS Gradient GeneratorGenerate Tailwind CSS gradient classes for text, buttons, and backgrounds.

Not quite the right gradient? Discover more

Lavender Skies

Color codes used in lavender skies gradient: #9b58b6, #a7c7e7, #cfaee0

Cotton Candy Dream

Color codes used in cotton candy dream gradient: #f8b4d8, #f2cfdf, #a7c7e7

Vivid Twilight

Color codes used in vivid twilight gradient: #b80f5e, #681b98, #4051b5

Vivid Twilight

Color codes used in vivid twilight gradient: #b80f5e, #681b98, #3949ac

Rose Sunset

Color codes used in rose sunset gradient: #b80f5e, #d1478c, #f28cae

Subtle Environment

Color codes used in subtle environment gradient: #a9d6bb, #f0e3cb, #d3c0b1

Serene Forest

Color codes used in serene forest gradient: #609087, #a2c3b9, #d5e2dc

Sunlit Forest

Color codes used in sunlit forest gradient: #7b9d88, #a8944d, #dcb041
Explore more gradients