Color Gradient Animator

Generate animated shifting gradient CSS.

Color 1

Color 2

Duration: 3s

Animated Preview

CSS Output

.animated-gradient {
  background: linear-gradient(90deg, #8b5cf6, #22d3ee);
  background-size: 200% 200%;
  animation: gradientShift 3s ease infinite;
}

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