# Fundos de gradiente animados para vídeo e redes sociais

[Canonical HTML page](https://gradiently.design/pt-pt/guide/animated-gradient-background)

Um gradiente animado pode parecer luz a mover-se pela seda, ou um protetor de ecrã. A diferença está em meia dúzia de decisões que podes tomar de propósito.

## The short version

- Um fundo de gradiente animado é uma mistura de cores que se move ao longo do tempo, normalmente deslocando a posição, mudando a forma, alterando o tom ou fazendo a luz respirar.
- Os gradientes animados calmos movem uma ou duas propriedades devagar, levando vários segundos ou mais por ciclo completo; mover tudo ao mesmo tempo parece carregado.
- As cores vizinhas no círculo cromático animam-se com limpeza, enquanto as cores opostas podem passar por cinzento ao misturarem-se.
- O texto sobre um gradiente animado tem de ser legível em todos os momentos do loop, incluindo os fotogramas mais claros e mais escuros.
- Para redes sociais e vídeo, exporta os gradientes animados como loops contínuos em MP4, com uma imagem estática para os sítios que não reproduzem vídeo.

Um **fundo de gradiente animado** é uma mistura de cores que se move: desliza pelo enquadramento, muda de forma, altera o tom ou ganha e perde brilho, normalmente em loop atrás de palavras ou de um produto. Os melhores parecem luz a mover-se por um material. Os fracos parecem um protetor de ecrã. O que os separa não é o software, mas algumas escolhas sobre o que se move, a que velocidade e em que cores.

Este guia trata do lado do design, para vídeo, publicações sociais e ecrãs. Se estás a criar um em código para um site, vê [gradientes animados em CSS](https://gradiently.design/pt-pt/guide/css-animated-gradient) e [gradientes com shaders](https://gradiently.design/pt-pt/guide/shader-gradients).

## O que pode mover-se num gradiente animado

Todo o gradiente animado é uma combinação de cinco tipos de mudança. A maioria dos bons usa um, por vezes dois. Usar os cinco ao mesmo tempo é a forma mais rápida de tornar um fundo inquieto.

| O que se move | O que se vê | Transmite |
| --- | --- | --- |
| Posição | Todo o campo desliza ou deriva | Calma, amplitude, cinema |
| Forma | Manchas de cor incham, dobram-se ou fluem umas para as outras | Orgânico, líquido |
| Tom | As cores inclinam-se para um lado e voltam, ou percorrem o círculo | Sazonal, divertido, enérgico se for rápido |
| Luz | O brilho respira, sobe e desce | Silencioso, luxuoso |
| Grão e partículas | Uma textura fina cintila ou deriva sobre a cor | Tátil, de cinema, atmosférico |

Escolhe um movimento principal. Um segundo, muito mais subtil, pode apoiá-lo.

## A que velocidade deve mover-se um gradiente animado

A velocidade decide a maior parte do ambiente. O movimento lento parece sofisticado e confiante; o rápido parece urgente. Num fundo atrás de palavras, um ciclo completo de mudança costuma pedir muitos segundos, não um ou dois. Se consegues seguir claramente o movimento enquanto lês o título, provavelmente é rápido demais.

- 0 s: crepúsculo: `linear-gradient(160deg, #1e1b4b 0%, #6d28d9 60%, #f472b6 100%)`
- 3 s: `linear-gradient(160deg, #1e1b4b 0%, #7c3aed 50%, #fb7185 100%)`
- 6 s: o mais quente: `linear-gradient(160deg, #312e81 0%, #a855f7 45%, #fb923c 100%)`
- 12 s: de volta ao crepúsculo: `linear-gradient(160deg, #1e1b4b 0%, #6d28d9 60%, #f472b6 100%)`

Quatro momentos de uma mudança lenta de cor. O último fotograma coincide com o primeiro, por isso o loop pode repetir-se sem salto.

O movimento deve também suavizar-se em vez de avançar a uma só velocidade. As mudanças que começam e acabam com suavidade parecem naturais; a velocidade constante parece mecânica. A [suavização](https://gradiently.design/pt-pt/guide/easing) explica porquê, com exemplos.

## Cores que animam bem

A animação mostra-te, uma a seguir à outra, todas as cores intermédias de um gradiente. Um gradiente estático pode esconder um ponto intermédio baço numa faixa estreita; um em movimento demora-se nele. As paletas mais seguras são **análogas**: vizinhas no círculo cromático, como índigo, violeta e rosa, ou verde-azulado, verde e lima. As suas cores intermédias mantêm-se vivas.

- Azul para laranja: meio cinzento: `linear-gradient(90deg, #2563eb 0%, #f97316 100%)`
- Via magenta: mantém-se vivo: `linear-gradient(90deg, #2563eb 0%, #c026d3 50%, #f97316 100%)`
- Verde-azulado para lima: vizinhas: `linear-gradient(90deg, #0f766e 0%, #22c55e 50%, #bef264 100%)`

As cores opostas misturadas diretamente passam por um cinzento apagado. Uma paragem pelo meio, ou tons vizinhos, mantêm a cor viva enquanto se move.

Se precisas de cores opostas, faz passá-las por uma cor-ponte, como no exemplo do meio, ou lê [porque é que os gradientes ficam cinzentos a meio](https://gradiently.design/pt-pt/guide/muddy-gradients). Mantém uma cor como base que nunca muda muito, normalmente a mais escura. Ancora o movimento e dá às palavras um lugar estável.

## Manter o texto legível sobre um gradiente em movimento

O texto sobre um gradiente estático só tem de se ler contra um fundo. Sobre um gradiente animado tem de se ler contra cada fotograma do loop. A falha clássica é um título perfeitamente claro no início que desaparece durante dois segundos quando uma mancha de cor brilhante passa por trás dele.

### Evita

- Verificar o contraste só no primeiro fotograma
- Manchas de cor brilhantes a passar pelas palavras
- Mover o texto e também o fundo
- Grandes ciclos de tom atrás de texto de tamanho corrente

### Faz

- Percorre o loop e verifica os momentos mais claros e mais escuros
- Mantém a zona mais calma do campo atrás das palavras
- Mantém as palavras paradas e deixa a cor mover-se
- Guarda as grandes mudanças de cor para fundos com títulos curtos

Algumas ferramentas ajudam aqui. Na Gradiently, o Mark por trás de um design sabe onde estão as palavras, e a sua zona mais calma e de melhor contraste fica atrás delas enquanto se move. Para os princípios gerais, vê [como pôr texto sobre um gradiente](https://gradiently.design/pt-pt/guide/text-on-gradient).

## Como criar um gradiente animado, passo a passo

1. **Cria o fotograma estático** Escolhe a base, três a cinco cores e a disposição das palavras. Deve funcionar como imagem estática antes de se mexer.
2. **Escolhe um movimento principal** Deriva, fluxo, uma mudança de tom ou luz que respira. Ajusta-o à marca: as marcas calmas derivam, as vivas podem fluir ou rodopiar.
3. **Define um ritmo lento** Começa mais devagar do que parece natural e acelera só se o movimento for difícil de notar.
4. **Faz o loop** O último fotograma tem de voltar ao primeiro. Os [loops contínuos](https://gradiently.design/pt-pt/guide/seamless-loop-video) explicam como.
5. **Verifica todos os momentos** Percorre o loop e faz uma pausa nos pontos mais claros e mais escuros para verificar as palavras.
6. **Exporta para o sítio onde vai passar** MP4 para redes sociais e sites, GIF só para email e uma imagem PNG estática para todo o resto. [GIF vs MP4](https://gradiently.design/pt-pt/guide/gif-vs-mp4) explica a escolha.

Um story vertical a anunciar aberturas até tarde todo o inverno sobre um gradiente em movimento

Um story vertical é a casa natural de um gradiente animado: palavras curtas paradas, cor a mover-se por trás.

## Onde os fundos de gradiente animados funcionam melhor

- **Stories e reels**, onde o vídeo é esperado. Mantém as palavras dentro das zonas seguras; vê [fundos para Reels e TikTok](https://gradiently.design/pt-pt/guide/reels-tiktok-backgrounds).
- **Publicações de feed** para anúncios e ofertas, onde o movimento destaca a publicação.
- **Cabeçalhos de sites**, como um vídeo curto sem som ou um fundo ao vivo, com uma alternativa estática. Os [fundos de vídeo em sites](https://gradiently.design/pt-pt/guide/video-background-website) tratam dos pormenores.
- **Ecrãs de palco e de loja**, onde loops longos e lentos passam durante horas.
- **Introduções e finais de vídeo**, como um campo silencioso atrás de um título.

Se usas a Gradiently, cada design pode ser exportado como um loop de 5 a 30 segundos: escolhe um movimento como Deriva, Fluxo, Respirar ou Redemoinho, um ritmo, como a cor se comporta e se há partículas a derivar por cima. O loop é feito para que o fim encontre o início.

## FAQ

### O que é um fundo de gradiente animado?

É uma mistura de cores que se move ao longo do tempo, a derivar, a fluir, a mudar de tom ou a fazer a luz respirar, normalmente em loop atrás de palavras, produtos ou vídeo.

### A que velocidade deve mover-se um gradiente animado?

Devagar, na maioria dos fundos. Um ciclo completo de mudança deve levar muitos segundos, e não deves conseguir seguir o movimento com conforto enquanto lês o título.

### Que cores são melhores para um gradiente animado?

Os tons vizinhos, como índigo, violeta e rosa, animam-se com mais limpeza. As cores opostas precisam de uma cor-ponte entre elas, ou passam por cinzento.

### Como mantenho o texto legível sobre um gradiente animado?

Verifica as palavras nos momentos mais claros e mais escuros do loop, mantém a zona mais calma do campo atrás delas e mantém o texto parado.

### Em que formato devo exportar um gradiente animado?

MP4 para redes sociais e sites. Usa o GIF só onde o vídeo não passa, como no email, e guarda um PNG estático como alternativa.