I have an HTML box, where a gradient background color animates. Gradient background includes 3 colors now. But I want to include all available colors.
How can we do that?
This is how I am doing right now.
background: linear-gradient(57deg, #fdd266, #c33c7a, #595ba8);
background-size: 600% 600%;
-webkit-animation: AnimationName 30s ease infinite;
-moz-animation: AnimationName 30s ease infinite;
animation: AnimationName 30s ease infinite;
height: 140px;
border-bottom: none;
Can you try as below
.box {
position: absolute;
left: 50%;
top: 50%;
background: linear-gradient(-45deg, #fdd266, #c33c7a, #595ba8);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
height: 9rem;
width:9rem;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}<div class="box">
here is your box
</div>