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%; }
}