Resumindo
- 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.
Nesta página
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 e os gradientes com shader.
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 |
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.
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) 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.
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. 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.
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 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 explica a escolha.
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.
- 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 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.
Perguntas frequentes
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.
Escrito pelo Gradiently
A equipe por trás do Gradiently, uma ferramenta de design criada em torno dos Marks: gradientes vivos que fazem tudo o que você cria ter a sua cara.
Ver nosso perfil
