Resumindo
- A maioria dos erros de design com gradiente vem de poucas causas: cores que passam pelo cinza, paradas demais, banding visível, pouco contraste no texto e presets intocados.
- Um gradiente entre dois matizes opostos costuma ficar cinza no meio em sRGB, e dá para corrigir com uma parada intermediária ou com interpolação em OKLCH.
- O banding aparece como listras visíveis em gradientes lentos, escuros ou sutis, e uma camada leve de grão ou dither em geral o esconde.
- O texto sobre um gradiente precisa ter o contraste conferido no pior ponto, e não no melhor, porque o fundo muda sob cada letra.
- Um gradiente parece caro quando tem uma estrutura clara, de três a cinco cores aparentadas, textura consistente e um motivo para existir.
Nesta página
Os erros de design com gradiente mais comuns são meios cinza e sujos, cores demais, banding visível, texto que desaparece, paradas secas, excesso de arco-íris, grão que não combina, presets intocados e um visual idêntico ao de todo mundo. Cada um tem uma causa específica e uma correção específica. Nenhum exige uma ferramenta nova, só um olhar mais atento ao que a mistura faz entre as paradas.
Este guia percorre os nove na ordem em que você costuma encontrá-los, da matemática da cor até a identidade. Se quiser o básico antes, leia o que é um gradiente.
Erro 1: um meio cinza e sujo
Misture duas cores de lados opostos do círculo cromático, como azul e laranja, e o ponto do meio em sRGB é um marrom-acinzentado sem graça. O navegador faz a média dos canais de vermelho, verde e azul, e a média de dois complementares fica perto do neutro. O resultado parece uma mancha entre duas cores boas.
Corrija passando a mistura por uma cor que fica entre as duas no círculo, ou interpolando em um espaço perceptual. Gradientes sujos trata dos dois métodos, e OKLCH em CSS explica a sintaxe.
Erro 2: cores demais
Cada cor que você adiciona é mais uma transição que o olho precisa ler. Passando de quatro ou cinco paradas, o gradiente deixa de parecer luz caindo sobre uma superfície e passa a parecer um gráfico de listras. Também fica impossível reproduzi-lo igual duas vezes.
Escolha uma família de matiz, adicione um parente mais claro e um mais escuro e permita no máximo um acento. A abordagem das cores análogas é o ponto de partida mais seguro.
Erro 3: listras de banding
Banding é a escada de degraus visíveis que aparece em um gradiente lento, sobretudo um escuro. Um canal de 8 bits tem 256 níveis, e quando uma mistura percorre uma pequena distância de cor por uma área larga, cada nível vira uma faixa de vários pixels. A compressão JPEG pesada piora a situação.
.hero {
position: relative;
background: linear-gradient(160deg, #0b1020 0%, #1e1b4b 60%, #312e81 100%);
}
.hero::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.08;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}O grão funciona porque espalha os pixels entre níveis vizinhos, e a borda entre duas faixas desaparece. Exporte em PNG ou em JPEG de alta qualidade. Banding em gradientes detalha as configurações de exportação.
Erro 4: texto que some no gradiente
Um gradiente muda sob cada letra. O texto branco pode ficar lindo na ponta escura de uma mistura e sumir na ponta clara da mesma linha. Quem projeta confere o título onde ele fica melhor, e o leitor o encontra onde fica pior.
O fundo passa direto pelas palavras, então algumas letras ficam sobre uma cor clara.
O mesmo design com a parte calma do campo movida para trás do texto.
Confira o contraste no ponto mais claro atrás de um texto claro, ou no mais escuro atrás de um texto escuro. A WCAG pede 4,5:1 para texto corrido e 3:1 para texto grande; o contraste de cor explica os números e o texto sobre gradiente trata da posição.
Erro 5: paradas secas e acidentais
Quando duas paradas ficam a poucos por cento de distância, a mistura salta de uma cor para a outra e desenha uma linha que ninguém pediu. Paradas secas são úteis de propósito, para listras e gráficos, mas uma emenda acidental parece um erro.
Erro 6: excesso de arco-íris
Um espectro completo é a coisa mais barulhenta que um gradiente pode fazer, e raramente diz algo sobre a marca que o usa. Ele também carrega ao mesmo tempo as associações de todos os matizes. Se você quer um arco-íris, use um arco curto dele e controle a luminosidade. Gradientes arco-íris mostra versões de bom gosto.
Erro 7: grão que não combina
Evite
- Grão grosso no post, fino no story e nenhum nos slides
- Grão aplicado sobre textos e logos
- Grão tão pesado que parece uma lente suja
- Ampliar uma textura de grão até cada pontinho virar uma mancha
Faça
- Um único tamanho e intensidade de grão para todos os formatos
- Grão só na camada de fundo
- Só o suficiente para quebrar o banding e dar textura
- Grão gerado no tamanho da exportação, e não esticado
A textura faz parte de um visual, então um grão inconsistente faz um conjunto de designs parecer vir de três lugares. Gradientes com grão mostra quanto usar.
Erro 8: publicar o preset sem mexer
A maioria das ferramentas oferece as mesmas misturas de duas cores a 135 graus. Ficam boas, e por isso estão em toda parte. Um preset é um ponto de partida: mude uma cor, adicione uma terceira parada, ajuste a direção ao layout e acrescente um material. Como usar um gerador de gradientes acompanha essas edições.
Erro 9: parecer com todo mundo
O último erro é o caro. Um gradiente bem feito, mas igual em espírito ao de todo concorrente, não ajuda em nada o reconhecimento. A correção é consistência mais algo difícil de copiar, como um material, um jeito de se mover ou um jeito de abrir espaço para as palavras. O branding com gradiente explica como ter um só seu.
| Erro | Correção rápida |
|---|---|
| Meio cinza | Parada intermediária ou interpolação em OKLCH |
| Cores demais | Uma família de matiz mais um acento |
| Banding | Grão fino, exportação em PNG ou de alta qualidade |
| Texto ilegível | Conferir o contraste no pior ponto |
| Paradas secas | Espaçar as paradas, a menos que a borda seja intencional |
| Excesso de arco-íris | Usar um arco curto do espectro |
| Grão que não combina | Uma receita de grão para todos os formatos |
| Preset intocado | Mudar cor, paradas, direção e textura |
| Igual a todo mundo | Adicionar um material e manter a consistência |
Perguntas frequentes
Por que meu gradiente fica cinza no meio?
Cores de lados opostos do círculo fazem uma média quase neutra em sRGB. Adicione uma parada intermediária em um matiz entre elas ou interpole em OKLCH.
Como evitar o banding em um gradiente?
Adicione uma camada de ruído fino ou de grão com baixa opacidade, evite a compressão JPEG pesada e dê aos gradientes escuros uma faixa maior de luminosidade para percorrer.
Quantas cores um gradiente deve ter?
Em geral de duas a quatro cores aparentadas, com no máximo um acento. Passando de cinco paradas, a maioria dos gradientes começa a parecer agitada.
Como deixar o texto legível sobre um gradiente?
Ponha o texto sobre a parte mais calma do campo e confira o contraste onde o fundo tem luminosidade mais próxima da do texto. Mire em 4,5:1 para texto corrido e 3:1 para texto grande.
Os presets de gradiente são ruins?
Não, mas são compartilhados por muita gente. Trate um preset como ponto de partida e mude as cores, as paradas, a direção e a textura antes de usá-lo.
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
