Generador de degradados animados CSS
Crea un fondo con degradado animado en segundos. Elige hasta seis colores, el ángulo, la velocidad y el estilo de animación, mira la vista previa en vivo y copia CSS listo para usar con @keyframes y una alternativa para movimiento reducido.
Última actualización:
Colores
De 2 a 6 colores. El primer color se repite al final cuando hace falta para que el ciclo no tenga cortes.
Cómo usar Generador de degradados animados CSS
- Elige una paleta o define tus propios colores; usa las flechas para cambiar su orden.
- Elige el estilo de animación: el desplazamiento fluido funciona en todas partes, mientras que los estilos giratorio y cónico hacen girar el propio degradado.
- Ajusta el ángulo, la duración y el tamaño. Los ciclos lentos de 10 a 20 segundos transmiten calma; los cortos, energía.
- Indica el nombre de clase que quieres usar en tu página y deja activada la opción de movimiento reducido.
- Copia el CSS y añade la clase a cualquier elemento, o descarga la demo HTML para verlo a pantalla completa.
Comparación de los tres estilos de animación
| Estilo | Cómo funciona | Aspecto | Compatibilidad con navegadores |
|---|---|---|---|
| Desplazamiento fluido | linear-gradient sobredimensionado, background-position animado 0% → 100% → 0% | Colores que se desplazan lentamente por el elemento | Todos los navegadores modernos |
| Ángulo giratorio | @property registra un <angle>; los keyframes lo giran 360° | La dirección del degradado da la vuelta | Navegadores con @property (Chrome/Edge 85+, Safari 16.4+, Firefox 128+) |
| Cónico girando | conic-gradient(from var(--angle), …) con los mismos keyframes | Una rueda de colores que gira alrededor del centro | Igual que el ángulo giratorio |
Cómo elegir la duración y los colores
- Duración: de 10 a 20 segundos por ciclo va bien para fondos de página; de 3 a 6 segundos, para botones, insignias y estados de carga.
- Colores cercanos: los tonos parecidos (por ejemplo tres azules y un verde azulado) se ven tranquilos y elegantes; los tonos contrastados resultan divertidos, pero pueden recargar.
- Ciclos sin cortes: el estilo de desplazamiento avanza y retrocede dentro de un mismo ciclo, y el estilo cónico repite el primer color al final, así que no hay saltos visibles.
- Legibilidad: mantén un contraste del texto de al menos 4.5:1 con todos los colores de la paleta, o añade una capa semitransparente detrás del texto.
Cómo usar el CSS
Copia el CSS en tu hoja de estilos y añade la clase a cualquier elemento de bloque, por ejemplo <section class="animated-gradient">. Dale al elemento una altura (o contenido) para que el fondo sea visible. Para un degradado estático sin movimiento, el generador de degradados CSS ofrece un control más fino de las paradas de color, y el generador de animaciones CSS cubre efectos de movimiento como desvanecimientos y rebotes.
Preguntas frecuentes
¿Cómo se anima un degradado CSS?
Los navegadores no pueden interpolar de forma fluida entre dos valores de degradado, así que los degradados animados usan un truco. El método clásico dibuja el degradado varias veces más grande que el elemento con background-size y anima background-position, de modo que los colores parecen fluir. El método más nuevo registra un ángulo personalizado con @property y anima ese ángulo dentro del degradado.
¿Qué navegadores admiten degradados animados?
El estilo de desplazamiento fluido usa solo background-size y background-position, que funcionan en todos los navegadores modernos. Los estilos giratorio y cónico necesitan @property, compatible con Chrome y Edge 85+, Safari 16.4+ y Firefox 128+. El CSS generado incluye primero una línea de fondo estático, así que los navegadores antiguos siguen mostrando el degradado, aunque sin movimiento.
¿Un degradado animado ralentizará mi página?
Un solo fondo con degradado es ligero, pero animar background-position vuelve a pintar el elemento en cada fotograma. Limítalo a una sección grande, como un banner principal, evita apilar muchas capas animadas y prefiere duraciones más largas. La regla de movimiento reducido lo desactiva para los usuarios que piden menos movimiento en su sistema.
¿Para qué sirve el ajuste de tamaño del fondo?
En el estilo de desplazamiento fluido, el degradado se dibuja más grande que el elemento; por ejemplo, 400% significa cuatro veces más ancho y más alto. Solo se ve una parte a la vez, y al mover la posición del fondo se revela el resto. Los tamaños más grandes muestran menos colores a la vez y hacen que el movimiento parezca más lento y suave.
¿Cómo pongo texto encima de un degradado animado?
Añade la clase a un contenedor y coloca tu contenido dentro. Usa texto blanco o muy oscuro con un text-shadow sutil, y comprueba el contraste con los colores más claros y más oscuros de tu paleta, porque el fondo que hay detrás del texto cambia constantemente.
¿Qué es prefers-reduced-motion?
Es una media query que se cumple cuando el usuario ha activado una opción para reducir el movimiento en su sistema operativo. El movimiento puede causar molestias a algunas personas, así que la regla generada detiene la animación para ellas y deja un degradado fijo.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.