Animated Gradient Color Background HTML and Css

April 19, 2023

Demo Check

HTML

<div class="animated-gradient-background"></div>

CSS

<style>

.animated-gradient-background {
width: 100%;
height: 100vh;
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient-animation 15s ease infinite;
}

@keyframes gradient-animation {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
</style>