HTML:
<div class="bg-gradient">
<div class="flex-center">
<h1>CSS Animated <br>Gradient Background</h1>
<h5>— Made with by TianDev —</h5>
</div>
</div>
</div>
CSS:
.bg-gradient {
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
height: 300px;
}
.flex-center {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}