Color Animation Generator

Design mesmerising CSS gradient animations with live preview

Presets

Color Stops

2/6 color stops

Animation Type

Controls

Duration4s

Direction

Easing

Live Preview

Generated CSS

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

.animated-element {
  background: linear-gradient(270deg, #6366f1, #ec4899);
  background-size: 200% 200%;
  animation: hueflow__R_av5ubvb_ 4s ease-in-out infinite alternate;
}