Animated Gradient Background

Preview

Tailwind Classes

bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 bg-[length:200%_200%] animate-gradient

CSS Code

.animated-gradient {
  background: linear-gradient(90deg, #a855f7, #ec4899, #ef4444);
  background-size: 200% 200%;
  animation: gradient 3s ease infinite;
}
@keyframes gradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

HTML Example

<div class="bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 bg-[length:200%_200%] animate-gradient min-h-[200px] rounded-lg"></div>

<style>
@keyframes gradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.animate-gradient { animation: gradient 3s ease infinite; }
</style>

Use Cases

Browser Support

All modern browsers