ToolsRail

Tailwind Animated Gradient Generator

Gradient Options

Advanced Options

Live Preview

Hover Effect Active

Sample Text Overlay

This text demonstrates contrast against your gradient background

Generated Tailwind Classes


            

          

          
          
          

            
Required CSS

            

              
.animate-gradient {
  background-size: 200% 200%;
  animation: gradientAnimation s ease infinite;
}
@keyframes gradientAnimation {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}