Gradient Animator

Create beautiful animated CSS gradient backgrounds.

Color Stops (2/5)

Animation Speed: 6s

1s20s

Angle: 135°

0°360°

Animation Type

Presets

Generated CSS

.animated-gradient {
  background: linear-gradient(135deg, #6366f1, #ec4899);
  background-size: 400% 400%;
  -webkit-animation: gradientShift 6s ease infinite;
  animation: gradientShift 6s ease infinite;
}

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

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

How to use

Choose colors and animation settings to create an animated gradient.