How to Animate Gradients with Pure CSS

Animated gradients can bring your design to life — and you don’t need JavaScript to achieve it!

Here’s a simple CSS trick:

@keyframes gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

body {
  background: linear-gradient(-45deg, #1e3c72, #2a5298, #4e54c8, #8f94fb);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}

This animation shifts the gradient’s position over time, creating a beautiful, dynamic background effect.