# Nove erros com gradientes que fazem o design parecer barato

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

A maioria dos gradientes que parecem baratos falha de uma de nove maneiras previsíveis. Aqui ficam todos os erros, o que os causa e a mudança concreta que os resolve.

## The short version

- 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.

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](https://gradiently.design/pt-pt/guide/what-is-a-gradient).

## 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.

- Antes: de azul a âmbar em linha reta: `linear-gradient(90deg, #2563eb 0%, #f59e0b 100%)`
- Depois: por um ponto médio magenta: `linear-gradient(90deg, #2563eb 0%, #db2777 50%, #f59e0b 100%)`
- Depois: interpolado em OKLCH: `linear-gradient(in oklch 90deg, #2563eb 0%, #f59e0b 100%)`

As mesmas duas pontas, três resultados. Uma paragem intermédia ou a interpolação em OKLCH mantém o meio saturado.

Resolve-o passando a mistura por uma cor que fique entre as duas no círculo, ou interpolando num espaço percetual. [Gradientes embaciados](https://gradiently.design/pt-pt/guide/muddy-gradients) trata dos dois métodos e [OKLCH em CSS](https://gradiently.design/pt-pt/guide/css-gradient-oklch) 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.

- Sete paragens: confuso: `linear-gradient(135deg, #ef4444 0%, #f97316 16%, #eab308 32%, #22c55e 48%, #06b6d4 64%, #6366f1 80%, #d946ef 100%)`
- Três paragens relacionadas: calmo: `linear-gradient(135deg, #1e1b4b 0%, #6d28d9 55%, #f0abfc 100%)`

Três cores relacionadas dão mais profundidade do que sete sem relação.

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](https://gradiently.design/pt-pt/guide/analogous-colors) é 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.

```css
.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");
}
```

Uma camada fina de ruído a cerca de 8% de opacidade desfaz as faixas sem parecer suja.

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](https://gradiently.design/pt-pt/guide/gradient-banding) 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.

Uma publicação vertical com um título colocado diretamente sobre um gradiente movimentado, com algumas letras a perder contraste

O fundo corre diretamente por baixo das palavras, por isso algumas letras ficam sobre cor viva.

A mesma publicação vertical com o gradiente a assentar numa zona calma e mais escura por trás do título

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](https://gradiently.design/pt-pt/guide/color-contrast-accessibility) explica os números e [texto sobre gradiente](https://gradiently.design/pt-pt/guide/text-on-gradient) 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.

- Paragens a 8%: junta visível: `linear-gradient(180deg, #0f172a 0%, #0f172a 46%, #7c3aed 54%, #c4b5fd 100%)`
- Paragens espaçadas: queda suave: `linear-gradient(180deg, #0f172a 0%, #3b1f7a 45%, #7c3aed 75%, #c4b5fd 100%)`

Deixa cada transição ocupar espaço real no campo.

## 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](https://gradiently.design/pt-pt/guide/rainbow-gradient) 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](https://gradiently.design/pt-pt/guide/grainy-gradients) 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](https://gradiently.design/pt-pt/guide/gradient-generator) 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](https://gradiently.design/pt-pt/guide/gradient-branding) 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 |

As nove soluções numa só página.

## FAQ

### 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.