Animated Gradient Generator

Create and export smooth, infinitely looping gradient animations.

Colors

Settings

Speed (seconds): 15s

Angle: 135°

Add Noise Texture

.animated-gradient {
  background: linear-gradient(135deg, #ff7e5f, #feb47b, #86a8e7);
  background-size: 450% 450%;
  animation: animated-gradient 15s ease infinite;
  
}


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