A versão curta
- 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.
Nesta página
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 e gradientes com shaders.
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 |
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.
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 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.
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. 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.
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 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 explica a escolha.
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.
- 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 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.
Perguntas frequentes
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.
Escrito pela Gradiently
A equipa por trás da Gradiently, uma ferramenta de design construída em torno dos Marks: gradientes vivos que fazem tudo o que crias parecer teu.
Ver o nosso perfil
