Tengo un cuadro HTML, donde se anima un color de fondo degradado. El fondo degradado ahora incluye 3 colores. Pero quiero incluir todos los colores disponibles.
¿Cómo podemos hacer eso?
Así es como lo estoy haciendo en este momento.
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;¿Puedes intentar lo siguiente?
.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>