Animated Gradient Background

An animated gradient background makes any website look elegant and cool. It makes your page more dynamic and pleasing to the eye.

CSS

/* ---------------------------------------------------------- */
/*                 Snippflow Gradient Animation               */
/* ---------------------------------------------------------- */

body {
    background: linear-gradient(45deg, #0d1741, #63D9B3);
    background-size: 400% 400%;
    animation: sf-gradient-animation 10s ease infinite;
}

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

Result:

See the Pen Animated Gradient Background by Snippflow (@snippflow) on CodePen.