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.