# Fondos de degradado animado para vídeo y redes sociales [Canonical HTML page](https://gradiently.design/es/guide/animated-gradient-background) Un degradado animado puede parecer luz moviéndose por la seda, o un salvapantallas. La diferencia son un puñado de decisiones de diseño que puedes tomar a propósito. ## The short version - Un fondo de degradado animado es una mezcla de colores que se mueve con el tiempo, normalmente desplazando su posición, cambiando de forma, variando el tono o haciendo respirar la luz. - Los degradados animados serenos mueven una o dos propiedades despacio, con un ciclo completo de varios segundos o más; mover todo a la vez resulta recargado. - Los colores que están cerca en el círculo cromático se animan limpiamente, mientras que los colores opuestos pueden pasar por gris al mezclarse. - El texto sobre un degradado animado debe ser legible en cada momento del bucle, incluidos los fotogramas más brillantes y más oscuros. - Para redes y vídeo, exporta los degradados animados como bucles perfectos en MP4, con una imagen fija para los lugares que no reproducen vídeo. Un **fondo de degradado animado** es una mezcla de colores que se mueve: se desplaza por el encuadre, cambia de forma, varía de tono o se ilumina y se atenúa, normalmente en bucle detrás de unas palabras o de un producto. Los mejores parecen luz moviéndose por un material. Los flojos parecen un salvapantallas. Lo que los separa no es el software sino unas pocas decisiones sobre qué se mueve, a qué velocidad y en qué colores. Esta guía trata el lado del diseño, para vídeo, publicaciones sociales y pantallas. Si lo estás construyendo en código para una web, mira los [degradados animados en CSS](https://gradiently.design/es/guide/css-animated-gradient) y los [degradados con shaders](https://gradiently.design/es/guide/shader-gradients). ## Qué puede moverse en un degradado animado Todo degradado animado es alguna combinación de cinco tipos de cambio. La mayoría de los buenos usan uno, a veces dos. Usar los cinco a la vez es la forma más rápida de que un fondo resulte inquieto. | Qué se mueve | Qué ves | Transmite | | --- | --- | --- | | Posición | Todo el campo se desliza o se desplaza | Calma, amplitud, aire de cine | | Forma | Las manchas de color se hinchan, se pliegan o fluyen unas hacia otras | Algo orgánico, líquido | | Tono | Los colores se inclinan hacia un lado y vuelven, o recorren el círculo | Estacional, juguetón, enérgico si es rápido | | Luz | El brillo respira, entra y sale | Silencio, lujo | | Grano y partículas | Una textura fina brilla o se desplaza sobre el color | Táctil, de película, atmosférico | Elige un movimiento principal. Otro mucho más sutil puede apoyarlo. ## A qué velocidad debe moverse un degradado animado La velocidad decide buena parte del ambiente. El movimiento lento se lee como caro y seguro; el rápido se lee como urgente. Para un fondo detrás de palabras, un ciclo completo de cambio suele necesitar muchos segundos, no uno o dos. Si puedes seguir con claridad el movimiento mientras lees el titular, probablemente es demasiado rápido. - 0 s: anochecer: `linear-gradient(160deg, #1e1b4b 0%, #6d28d9 60%, #f472b6 100%)` - 3 s: `linear-gradient(160deg, #1e1b4b 0%, #7c3aed 50%, #fb7185 100%)` - 6 s: lo más cálido: `linear-gradient(160deg, #312e81 0%, #a855f7 45%, #fb923c 100%)` - 12 s: de vuelta al anochecer: `linear-gradient(160deg, #1e1b4b 0%, #6d28d9 60%, #f472b6 100%)` Cuatro momentos de un mismo cambio lento de color. El último fotograma coincide con el primero, así que el bucle puede repetirse sin un salto. El movimiento también debe suavizarse en lugar de avanzar a una sola velocidad. Los cambios que empiezan y terminan con suavidad parecen naturales; la velocidad constante parece mecánica. La [suavización del movimiento](https://gradiently.design/es/guide/easing) explica por qué, con ejemplos. ## Colores que se animan bien La animación te muestra todos los colores intermedios de un degradado, uno tras otro. Un degradado fijo puede esconder un punto medio apagado en una banda fina; uno en movimiento se detiene en él. Las paletas más seguras son las **análogas**: vecinas en el círculo cromático, como índigo, violeta y rosa, o verde azulado, verde y lima. Sus colores intermedios se mantienen vivos. - De azul a naranja: medio gris: `linear-gradient(90deg, #2563eb 0%, #f97316 100%)` - Vía magenta: sigue vivo: `linear-gradient(90deg, #2563eb 0%, #c026d3 50%, #f97316 100%)` - De verde azulado a lima: vecinos: `linear-gradient(90deg, #0f766e 0%, #22c55e 50%, #bef264 100%)` Los colores opuestos mezclados directamente pasan por un gris apagado. Una parada intermedia, o tonos vecinos, mantienen vivo el color mientras se mueve. Si necesitas colores opuestos, hazlos pasar por un color puente, como en el ejemplo del medio, o lee [por qué los degradados se vuelven grises en el medio](https://gradiently.design/es/guide/muddy-gradients). Mantén un color como base que apenas cambie, normalmente el más oscuro. Ancla el movimiento y da a las palabras un lugar estable donde asentarse. ## Cómo mantener legible el texto sobre un degradado en movimiento El texto sobre un degradado fijo solo tiene que leerse contra un fondo. Sobre un degradado animado tiene que leerse contra cada fotograma del bucle. El fallo clásico es un titular perfectamente claro al principio que desaparece durante dos segundos cuando una mancha brillante de color pasa por detrás. ### Evita - Comprobar el contraste solo en el primer fotograma - Manchas brillantes de color que atraviesan las palabras - Mover el texto además del fondo - Grandes ciclos de tono detrás de texto de cuerpo ### Haz - Recorre el bucle y comprueba los momentos más brillantes y más oscuros - Mantén la parte más tranquila del campo detrás de las palabras - Deja quietas las palabras y que se mueva el color - Reserva los cambios fuertes de color para fondos con titulares cortos Algunas herramientas ayudan en esto. En Gradiently el Mark que hay detrás de un diseño sabe dónde están las palabras, y su región más tranquila y de mejor contraste se queda detrás de ellas mientras se mueve. Para los principios generales, mira [cómo poner texto sobre un degradado](https://gradiently.design/es/guide/text-on-gradient). ## Cómo diseñar un degradado animado, paso a paso 1. **Diseña el fotograma fijo** Elige la base, de tres a cinco colores y la maquetación de las palabras. Debe funcionar como imagen fija antes de moverse. 2. **Elige un movimiento principal** Deriva, flujo, un cambio de tono o luz que respira. Adáptalo a la marca: las marcas serenas derivan, las marcas vivaces pueden fluir o girar. 3. **Fija un ritmo lento** Empieza más despacio de lo que parece natural y acelera solo si el movimiento cuesta de notar. 4. **Hazlo en bucle** El último fotograma debe llevar de vuelta al primero. Los [bucles perfectos](https://gradiently.design/es/guide/seamless-loop-video) explican cómo. 5. **Comprueba cada momento** Recorre el bucle y haz una pausa en los puntos más brillantes y más oscuros para comprobar las palabras. 6. **Exporta para el lugar donde se reproducirá** MP4 para redes y webs, un GIF solo para el correo y un PNG fijo para todo lo demás. [GIF o MP4](https://gradiently.design/es/guide/gif-vs-mp4) explica la elección. Una historia vertical que anuncia aperturas nocturnas todo el invierno sobre un degradado en movimiento Una historia vertical es el hogar natural de un degradado animado: palabras cortas quietas y el color moviéndose detrás. ## Dónde funcionan mejor los fondos de degradado animado - **Historias y reels**, donde se espera vídeo. Mantén las palabras dentro de las zonas seguras; mira los [fondos para Reels y TikTok](https://gradiently.design/es/guide/reels-tiktok-backgrounds). - **Publicaciones del feed** para anuncios y ofertas, donde el movimiento distingue la publicación. - **Cabeceras de webs**, como un vídeo corto sin sonido o un fondo en vivo, con una imagen fija de reserva. Los [fondos de vídeo en webs](https://gradiently.design/es/guide/video-background-website) cubren los detalles. - **Pantallas de escenario y de tienda**, donde se reproducen bucles largos y lentos durante horas. - **Intros y cierres de vídeo**, como un campo tranquilo detrás de un título. Si usas Gradiently, cada diseño se puede exportar como un bucle de 5 a 30 segundos: elige un movimiento como Deriva, Flujo, Respiración o Remolino, un ritmo, cómo se comporta el color y si las partículas se desplazan por encima. El bucle se hace de modo que su final encuentre su principio. ## FAQ ### ¿Qué es un fondo de degradado animado? Es una mezcla de colores que se mueve con el tiempo, se desplaza, fluye, varía de tono o hace respirar la luz, normalmente como un bucle detrás de palabras, productos o vídeo. ### ¿A qué velocidad debe moverse un degradado animado? Despacio, en la mayoría de los fondos. Un ciclo completo de cambio debe llevar muchos segundos, y no deberías poder seguir el movimiento con comodidad mientras lees el titular. ### ¿Qué colores son mejores para un degradado animado? Los tonos vecinos, como índigo, violeta y rosa, se animan con más limpieza. Los colores opuestos necesitan un color puente entre ellos, o pasan por gris. ### ¿Cómo mantengo legible el texto sobre un degradado animado? Comprueba las palabras en los momentos más brillantes y más oscuros del bucle, mantén la parte más tranquila del campo detrás de ellas y deja el texto quieto. ### ¿En qué formato debo exportar un degradado animado? MP4 para las plataformas sociales y las webs. Usa GIF solo donde no se reproduce vídeo, como el correo, y guarda un PNG fijo de reserva.