Gradientes Animados

Crea impresionantes gradientes animados para tus proyectos web

Animación

Desplazamiento

Duración

8s

Velocidad

1x

Suavizado

Ease

Colores

1x

CSS

.animated-gradient {
  position: relative;
  background: linear-gradient(45deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
  background-size: 200% 200%;
  animation: gradient-shift 8s ease alternate infinite;
  overflow: hidden;
}



@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

Space: Play/Pausa • R: Aleatorio • F: Pantalla • P: Presentar • T: Texto