Gradient Background Animation Using CSS & HTML

Many web designers want to create attractive and eye-catching backgrounds for your website like Gradient background animation. So here I have ready-made Gradient background animation using Pure CSS and HTML that is lightweight code.

HTML

<h2>Gradient background animation using Pure CSS and HTML</h2>

CSS

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background-image: linear-gradient(125deg, #2196F3, #8BC34A, #FFC107, #009688, #b3761d);
    background-size: 450% 450%;
    animation-name: animation;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    font-family: arial;
}
h2{
  color: #fff;
  text-align: center;
  margin: 80px auto;
}

/*----Animation CSS----*/
@keyframes animation {
    0%{
        background-position: 0% 20%;
    }
    25%{
        background-position: 25% 25%;
    }
    50%{
        background-position: 50% 50%;
    }
    100%{
        background-position: 200% 200%;
  }
}