CSS @keyframes · Live Preview · CSS + Tailwind Output

CSS animated gradient generator

Build smooth, looping animated gradient backgrounds. Adjust colors, direction, speed and animation type — then copy the production-ready CSS or Tailwind arbitrary value.

Colors
Shape
Angle
135°
Speed
6s
Animation type
Background size
300%
Presets

                

                  
                  
                

              

            


          

        

      

    


    


    

      

        
Animated gradient FAQ

        
How does the CSS animation work?
The technique uses background-size set to 200–500% so the gradient is larger than the element, then animates background-position with @keyframes to shift the visible area — creating the illusion of flowing color without JavaScript.

        
Will it work in all browsers?
Yes. CSS @keyframes and background-position animation work in all modern browsers including Safari, Chrome, Firefox and Edge.

        
How do I apply it to text?
Add -webkit-background-clip: text; background-clip: text; color: transparent; to the same element. Note: gradient text (background-clip on text) has accessibility concerns — ensure sufficient contrast.