A versão curta
- A maioria dos erros de design com gradientes vem de poucas causas: cores que passam pelo cinzento, demasiadas paragens, faixas visíveis, contraste fraco no texto e predefinições por mexer.
- Um gradiente entre dois tons opostos fica muitas vezes cinzento a meio em sRGB, o que se resolve com uma paragem intermédia ou com interpolação em OKLCH.
- As faixas aparecem como listas visíveis em gradientes lentos, escuros ou subtis, e uma camada leve de grão ou de dithering costuma escondê-las.
- O texto sobre um gradiente precisa de ter o contraste verificado no pior ponto e não no melhor, porque o fundo muda por baixo de cada letra.
- Um gradiente parece caro quando tem uma estrutura clara, três a cinco cores relacionadas, textura consistente e uma razão para existir.
Nesta página
Os erros de design com gradientes mais comuns são meios cinzentos e embaciados, demasiadas cores, faixas visíveis, texto que desaparece, paragens secas, excesso de arco-íris, grão que não condiz, predefinições por mexer e um visual igual ao de todos os outros. Cada um tem uma causa concreta e uma solução concreta. Nenhum precisa de uma ferramenta nova, apenas de olhar melhor para o que a mistura faz entre as suas paragens.
Este guia percorre os nove pela ordem em que costumas encontrá-los, da matemática da cor até à identidade. Se queres primeiro o essencial, lê o que é um gradiente.
Erro 1: um meio cinzento e embaciado
Mistura duas cores de lados opostos do círculo cromático, como azul e laranja, e o ponto intermédio em sRGB é um castanho-acinzentado baço. 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 boas cores.
Resolve-o passando a mistura por uma cor que fique entre as duas no círculo, ou interpolando num espaço percetual. Gradientes embaciados trata dos dois métodos e OKLCH em CSS explica a sintaxe.
Erro 2: demasiadas cores
Cada cor que acrescentas é mais uma transição que o olhar tem de ler. Passadas quatro ou cinco paragens, um gradiente deixa de parecer luz a cair sobre uma superfície e passa a parecer um gráfico de listas. Fica também impossível de reproduzir da mesma maneira duas vezes.
Escolhe uma família de tons, acrescenta um parente mais claro e outro mais escuro e permite no máximo um acento. A abordagem das cores análogas é o ponto de partida mais seguro.
Erro 3: faixas de banding
O banding é a escada de degraus visíveis que se vê num gradiente lento, sobretudo escuro. Um canal de 8 bits tem 256 níveis, e quando uma mistura percorre uma pequena distância de cor numa área larga, cada nível torna-se uma faixa com vários píxeis de largura. A compressão JPEG forte agrava o problema.
.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 píxeis pelos níveis vizinhos, e o limite entre duas faixas desaparece. Exporta em PNG ou em JPEG de alta qualidade. Banding em gradientes explica as definições de exportação em pormenor.
Erro 4: texto que desaparece sobre o gradiente
Um gradiente muda por baixo de cada letra. O texto branco pode ler-se lindamente na ponta escura de uma mistura e desaparecer na ponta clara da mesma linha. Quem desenha verifica o título onde ele fica melhor, e quem lê encontra-o onde fica pior.
O fundo corre diretamente por baixo das palavras, por isso algumas letras ficam sobre cor viva.
O mesmo design com a zona calma do campo deslocada para trás do texto.
Verifica o contraste no ponto mais claro por trás de texto claro, ou no ponto mais escuro por trás de texto escuro. As WCAG pedem 4,5:1 para texto corrido e 3:1 para texto grande; contraste de cor explica os números e texto sobre gradiente trata da colocação.
Erro 5: paragens secas e acidentais
Quando duas paragens ficam a poucos pontos percentuais uma da outra, a mistura salta de uma cor para a seguinte e desenha uma linha que ninguém pediu. As paragens secas são úteis de propósito, para listas e gráficos, mas uma junta acidental lê-se como um erro.
Erro 6: excesso de arco-íris
Um espectro completo é a coisa mais ruidosa que um gradiente pode fazer, e raramente diz alguma coisa sobre a marca que o usa. Traz também as associações de todos os tons ao mesmo tempo. Se queres um arco-íris, usa um arco curto dele e controla a luminosidade. Gradientes arco-íris mostra versões de bom gosto.
Erro 7: grão que não condiz
Evita
- Grão grosso na publicação, fino no story e nenhum nos diapositivos
- Grão aplicado sobre texto e logótipos
- Grão tão pesado que parece uma lente suja
- Ampliar uma textura de grão até cada ponto virar uma mancha
Faz
- Um só tamanho e intensidade de grão em todos os formatos
- Grão apenas na camada de fundo
- O suficiente para desfazer o banding e dar textura
- Grão gerado no tamanho de exportação, não esticado
A textura faz parte de um visual, por isso um grão inconsistente faz um conjunto de designs parecer vir de três sítios. Gradientes com grão explica quanto usar.
Erro 8: publicar a predefinição sem lhe mexer
A maioria das ferramentas oferece as mesmas misturas de duas cores a 135 graus. Ficam bem, e é por isso que estão em todo o lado. Uma predefinição é um ponto de partida: muda uma cor, acrescenta uma terceira paragem, ajusta a direção ao esquema e junta um material. Usar um gerador de gradientes percorre essas edições.
Erro 9: parecer igual a todos os outros
O último erro é o caro. Um gradiente bem feito mas igual em espírito ao de todos os concorrentes não faz nada pelo reconhecimento. A solução é consistência mais algo difícil de copiar, como um material, uma forma de se mover ou de abrir espaço para as palavras. Branding com gradientes explica como ser dono de um.
| Erro | Solução rápida |
|---|---|
| Meio cinzento | Paragem intermédia ou interpolação em OKLCH |
| Demasiadas cores | Uma família de tons mais um acento |
| Banding | Grão fino, exportação em PNG ou de alta qualidade |
| Texto ilegível | Verificar o contraste no pior ponto |
| Paragens secas | Espaçar as paragens, a menos que o limite seja intencional |
| Excesso de arco-íris | Usar um arco curto do espectro |
| Grão que não condiz | Uma receita de grão para todos os formatos |
| Predefinição por mexer | Mudar cor, paragens, direção e textura |
| Igual a todos | Acrescentar um material e mantê-lo consistente |
Perguntas frequentes
Porque é que o meu gradiente fica cinzento a meio?
As cores de lados opostos do círculo dão em média um quase neutro em sRGB. Acrescenta uma paragem intermédia num tom entre elas, ou interpola em OKLCH.
Como evito o banding num gradiente?
Acrescenta uma camada fina de ruído ou grão com pouca opacidade, evita a compressão JPEG forte e dá aos gradientes escuros uma gama de luminosidade mais ampla para percorrer.
Quantas cores deve ter um gradiente?
Normalmente duas a quatro cores relacionadas, com um acento no máximo. Para lá de cinco paragens, a maioria dos gradientes começa a parecer confusa.
Como deixo o texto legível sobre um gradiente?
Coloca o texto sobre a zona mais calma do campo e verifica o contraste onde o fundo tem luminosidade mais próxima da do texto. Aponta a 4,5:1 para texto corrido e 3:1 para texto grande.
As predefinições de gradiente são más?
Não, mas são partilhadas por muita gente. Trata uma predefinição como ponto de partida e muda-lhe as cores, as paragens, a direção e a textura antes de a usares.
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
