The problem
You want a dynamic, eye-catching background that continuously animates through gradient colors.
The solution
.animated-gradient {
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient-shift 15s ease infinite;
}
@keyframes gradient-shift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}See it live
Put it to work
<div class="animated-gradient" style="width: 100%; height: 300px;">
Content here
</div>Worth knowing
Adjust animation duration for faster or slower transitions. The background-size at 400% allows for smooth movement.