Animating Gradient Backgrounds in CSS

Create a moving gradient background effect with CSS animations.

Source Code

@keyframes gradient-animation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.animated-gradient {
    background: linear-gradient(270deg, #6a11cb, #2575fc);
    background-size: 200% 200%;
    animation: gradient-animation 30s ease infinite;
}