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

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

Um gradiente animado pode parecer luz atravessando seda ou um protetor de tela. A diferença está em algumas decisões de design que você pode tomar de propósito.

## The short version

- Um fundo de gradiente animado é uma mistura de cores que se move ao longo do tempo, em geral deslocando a posição, mudando de forma, variando o matiz ou fazendo a luz respirar.
- Gradientes animados calmos movem uma ou duas propriedades devagar, levando vários segundos ou mais por ciclo completo; mover tudo ao mesmo tempo parece agitado.
- Cores que ficam perto uma da outra no círculo cromático animam bem, enquanto cores opostas podem passar por cinza ao se misturar.
- O texto sobre um gradiente animado precisa ser legível em todos os momentos do loop, inclusive nos quadros mais claros e mais escuros.
- Para redes sociais e vídeo, exporte os gradientes animados como loops contínuos em MP4, com uma imagem estática para os lugares que não reproduzem vídeo.

Um **fundo de gradiente animado** é uma mistura de cores que se move: desliza pelo quadro, muda de forma, varia o matiz ou clareia e escurece, em geral num loop atrás de palavras ou de um produto. Os melhores parecem luz atravessando um material. Os fracos parecem um protetor de tela. O que os separa não é o software, mas algumas escolhas sobre o que se move, com que velocidade e em quais cores.

Este guia trata do lado do design, para vídeo, posts e telas. Se você está construindo um em código para um site, veja os [gradientes animados em CSS](https://gradiently.design/pt-br/guide/css-animated-gradient) e os [gradientes com shader](https://gradiently.design/pt-br/guide/shader-gradients).

## O que pode se mover num gradiente animado

Todo gradiente animado é alguma combinação de cinco tipos de mudança. A maioria dos bons usa uma, às vezes duas. Usar as cinco ao mesmo tempo é a forma mais rápida de deixar um fundo inquieto.

| O que se move | O que você vê | Sensação |
| --- | --- | --- |
| Posição | O campo inteiro desliza ou deriva | Calma, amplitude, cinema |
| Forma | Poças de cor crescem, se dobram ou escorrem umas nas outras | Orgânica, líquida |
| Matiz | As cores se inclinam para um lado e voltam, ou percorrem o círculo | Sazonal, divertida, enérgica quando rápida |
| Luz | O brilho respira, entrando e saindo | Silenciosa, luxuosa |
| Grão e partículas | Uma textura fina cintila ou deriva sobre a cor | Tátil, cinematográfica, atmosférica |

Escolha um movimento principal. Um segundo, bem mais sutil, pode apoiá-lo.

## Com que velocidade um gradiente animado deve se mover

A velocidade decide a maior parte do clima. O movimento lento parece caro e confiante; o rápido parece urgente. Para um fundo atrás de palavras, um ciclo completo de mudança costuma pedir muitos segundos, e não um ou dois. Se você acompanha o movimento com clareza enquanto lê o título, provavelmente está rápido demais.

- 0 s: anoitecer: `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 anoitecer: `linear-gradient(160deg, #1e1b4b 0%, #6d28d9 60%, #f472b6 100%)`

Quatro momentos de uma mudança lenta de cor. O último quadro é igual ao primeiro, então o loop pode se repetir sem saltos.

O movimento também deve suavizar, em vez de andar numa velocidade só. Mudanças que começam e terminam com delicadeza parecem naturais; velocidade constante parece mecânica. O guia de [suavização (easing)](https://gradiently.design/pt-br/guide/easing) explica por quê, com exemplos.

## Cores que animam bem

A animação mostra todas as cores intermediárias de um gradiente, uma depois da outra. Um gradiente parado pode esconder um ponto médio opaco numa faixa fina; um em movimento se demora 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 cores intermediárias delas continuam vivas.

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

Cores opostas misturadas diretamente passam por um cinza apagado. Uma parada no meio, ou matizes vizinhos, mantêm a cor viva enquanto se move.

Se você precisa de cores opostas, passe-as por uma cor-ponte, como no exemplo do meio, ou leia [por que os gradientes ficam cinza no meio](https://gradiently.design/pt-br/guide/muddy-gradients). Mantenha uma cor como base que quase não muda, em geral a mais escura. Ela ancora o movimento e dá às palavras um lugar estável.

## Como manter o texto legível sobre um gradiente em movimento

O texto sobre um gradiente parado só precisa ser lido contra um fundo. Sobre um gradiente animado, ele precisa ser lido contra cada quadro do loop. A falha clássica é um título perfeitamente claro no início que desaparece por dois segundos quando uma poça de cor brilhante passa por trás dele.

### Evite

- Conferir o contraste só no primeiro quadro
- Poças de cor brilhantes passando pelas palavras
- Mover o texto além do fundo
- Grandes ciclos de matiz atrás de texto em tamanho de leitura

### Faça

- Percorra o loop e confira os momentos mais claros e mais escuros
- Mantenha a parte mais calma do campo atrás das palavras
- Deixe as palavras paradas e a cor se mover
- Reserve as grandes mudanças de cor para fundos com títulos curtos

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

## Como criar um gradiente animado, passo a passo

1. **Desenhe o quadro estático** Escolha a base, de três a cinco cores e o layout das palavras. Ele deve funcionar como imagem parada antes de se mover.
2. **Escolha um movimento principal** Deriva, fluxo, uma mudança de matiz ou luz que respira. Combine com a marca: marcas calmas derivam, marcas animadas podem fluir ou girar.
3. **Defina um ritmo lento** Comece mais devagar do que parece natural e só acelere se o movimento for difícil de notar.
4. **Faça-o entrar em loop** O último quadro precisa levar de volta ao primeiro. Os [loops contínuos](https://gradiently.design/pt-br/guide/seamless-loop-video) explicam como.
5. **Confira cada momento** Percorra o loop e pause nos pontos mais claros e mais escuros para conferir as palavras.
6. **Exporte para o lugar onde vai rodar** MP4 para redes sociais e sites, GIF só para e-mail e um PNG estático para todo o resto. [GIF ou MP4](https://gradiently.design/pt-br/guide/gif-vs-mp4) explica a escolha.

Um story vertical anunciando abertura até mais tarde todo o inverno sobre um gradiente em movimento

Um story vertical é a casa natural de um gradiente animado: palavras curtas paradas, cor se movendo atrás.

## Onde os fundos de gradiente animados funcionam melhor

- **Stories e reels**, onde se espera vídeo. Mantenha as palavras dentro das áreas seguras; veja [fundos para Reels e TikTok](https://gradiently.design/pt-br/guide/reels-tiktok-backgrounds).
- **Posts de feed** para anúncios e ofertas, onde o movimento destaca o post.
- **Seções principais de sites**, como um vídeo curto e sem som ou um fundo ao vivo, com uma imagem estática de reserva. Os [fundos em vídeo em sites](https://gradiently.design/pt-br/guide/video-background-website) trazem os detalhes.
- **Telas de palco e de loja**, onde loops longos e lentos rodam por horas.
- **Aberturas e encerramentos de vídeo**, como um campo silencioso atrás de um título.

Se você usa o Gradiently, cada design pode ser exportado como um loop de 5 a 30 segundos: escolha um movimento como Deriva, Fluxo, Respiração ou Redemoinho, um ritmo, como a cor se comporta e se partículas flutuam sobre ela. O loop é feito para que o fim encontre o começo.

## FAQ

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

É uma mistura de cores que se move ao longo do tempo, derivando, fluindo, variando o matiz ou fazendo a luz respirar, em geral como um loop atrás de palavras, produtos ou vídeo.

### Com que velocidade um gradiente animado deve se mover?

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

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

Matizes vizinhos, como índigo, violeta e rosa, animam com mais limpeza. Cores opostas precisam de uma cor-ponte no meio, senão passam por cinza.

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

Confira as palavras nos momentos mais claros e mais escuros do loop, mantenha a parte mais calma do campo atrás delas e deixe o texto parado.

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

MP4 para redes sociais e sites. Use GIF só onde vídeo não roda, como e-mail, e guarde um PNG estático como reserva.