Animated Gradient Generator

Create and export smooth, infinitely looping gradient animations.

Colors

Settings

.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%; } }