Animated Gradient Generator

Build a smoothly shifting gradient background and export the full CSS @keyframes animation.

Pure CSS animationNo JavaScript
8s · ease
CSS

            

        


        

            
            
            
        

    


    


        

            
Presets

            

        


        

            
Colors

            

            
        


        

            
Animation style

            

                
                
                
                
            

        


        

            
Timing

            

                
Duration8s

                
            

            

                
Easingease

                
            

        


    



















Nothing here animates the gradient itself





CSS cannot interpolate between two linear-gradient values — a gradient is a generated image, not an animatable property. Every smooth gradient animation you have seen works around that the same way: make the background much larger than the element, then slide it.





.animated-gradient {
  background: linear-gradient(120deg, #FF6B6B, #4ECDC4, #556270);
  background-size: 300% 300%;
  animation: shift 12s ease infinite;
}
@keyframes shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}





The oversized background-size is what creates the illusion of colors bleeding into one another: you are only ever seeing a moving window onto a static gradient. Bigger multiples mean a slower, subtler drift; 200% is a gentle sweep, 400% is nearly imperceptible unless the cycle is short.





Why this one is cheap and others are not





Animating background-position is handled during paint, which is inexpensive for a single large element and stays smooth on modest hardware. Animating the color stops — by swapping whole gradient values on a timer, or with JavaScript — forces the browser to regenerate the image every frame, and on a full-page background that is where dropped frames come from.





Two habits keep it comfortable: run the animation on one element rather than several, and keep the cycle long. Under about six seconds a moving background stops reading as atmosphere and starts competing with the content in front of it.





Motion is a preference, not a default





A continuously moving background is exactly the kind of thing that triggers discomfort for people with vestibular sensitivity, and it never stops — there is no scroll or hover to escape it. Every animation this tool generates comes wrapped accordingly:





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





The gradient stays; only the movement stops. That is the right fallback — the design still reads as intended rather than collapsing to a flat color.





Frequently asked questions





Why does my animation jump at the end of each loop?





Because the first and last keyframes are not the same position. Either return to the starting value at 100%, as the generated CSS does, or use animation-direction: alternate and let it play backwards instead of restarting.





Can I animate a gradient on text?





Yes — the same background-position trick works once the gradient is clipped to the glyphs. The Gradient Text Generator has the animation option built in and writes the background-clip lines for you.





Will this drain battery on mobile?





A single long-cycle background animation is not a meaningful drain, but it does keep the compositor awake. If the element scrolls out of view, pausing it with an IntersectionObserver is a reasonable courtesy on a long page.





Does an animated background hurt Core Web Vitals?





Not directly — it is CSS, it loads with the stylesheet, and it shifts nothing. The risk is indirect: a busy hero often arrives alongside a large image or web font, and those are what move the numbers.





Other gradient tools