# Como fazer um gradiente ficar bonito: sete verificações

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

A maioria dos maus gradientes falha nos mesmos poucos testes. Passa qualquer mistura por estas sete verificações, por ordem, e saberás exatamente o que mudar antes de alguém a ver.

## The short version

- Um gradiente fica bonito quando as suas cores se encontram sem ficar cinzentas, as paragens são espaçadas de forma desigual e a luz parece vir de um só sítio.
- Os meios cinzentos ou lamacentos acontecem quando duas cores opostas se misturam diretamente; acrescentar uma cor-ponte ou misturar em OKLCH resolve.
- Uma pequena quantidade de grão, com cerca de 2 a 6 por cento de opacidade, esconde o banding e faz um gradiente digital parecer uma superfície.
- Um bom gradiente deixa sempre uma zona calma onde as palavras podem assentar com contraste forte.
- Exporta gradientes em PNG ou vídeo de alta qualidade em vez de JPEG comprimido, que cria riscas visíveis.

Saber fazer um gradiente ficar bonito resume-se a sete verificações, feitas por ordem: cores que se encontram sem ficar cinzentas, paragens colocadas de forma desigual, luz que vem de uma direção, um fundo que dá o ambiente, um toque de grão, um espaço calmo para as palavras e uma exportação que o mantém suave. Cada uma é um teste rápido com uma solução clara. Quase todos os gradientes com ar barato falham em pelo menos duas, e corrigir essas duas costuma fazer mais do que mudar as cores por completo.

| Verificação | O teste | Se falhar |
| --- | --- | --- |
| 1. Meio limpo | O ponto médio é cinzento ou castanho? | Acrescenta uma cor-ponte ou mistura em OKLCH |
| 2. Paragens desiguais | Todas as cores têm a mesma largura? | Dá a uma cor a maior parte do espaço |
| 3. Uma só luz | Consegues dizer onde está a luz? | Aviva um lado ou um canto |
| 4. Um fundo | É claramente escuro ou claramente claro? | Empurra a base para mais escura ou mais pálida |
| 5. Grão | Vês riscas? | Acrescenta 2 a 6 por cento de ruído |
| 6. Espaço para palavras | O texto lê-se em todo o lado? | Acalma a zona atrás dele |
| 7. Exportação | Sobrevive ao carregamento? | PNG para imagens, alto débito para vídeo |

A verificação completa numa página. Faz de cima para baixo; as correções seguintes dependem das anteriores.

## 1. Cores que se encontram sem estragos

Quando duas cores opostas na roda se misturam diretamente, o meio cai em cinzento. Azul a laranja e verde a rosa são os suspeitos do costume. Ou acrescentas uma cor-ponte entre elas, para a mistura percorrer a roda em vez de passar pelo centro, ou misturas num espaço de cor percetual. [Gradientes lamacentos](https://gradiently.design/pt-pt/guide/muddy-gradients) e [interpolação de gradientes](https://gradiently.design/pt-pt/guide/gradient-interpolation) explicam ambos.

- Falha: meio cinzento: `linear-gradient(90deg, #2563eb 0%, #f97316 100%)`
- Passa: ponte magenta: `linear-gradient(90deg, #2563eb 0%, #c026d3 50%, #f97316 100%)`
- Passa: misturado em OKLCH: `linear-gradient(90deg in oklch, #2563eb 0%, #f97316 100%)`

As mesmas duas cores de três maneiras. Uma ponte ou uma mistura percetual mantém o meio vivo.

## 2. Paragens colocadas de forma desigual

Cores com espaçamento igual leem-se como uma rampa de uma predefinição. Na natureza, uma cor costuma dominar e a mudança acontece num trecho curto: um céu é quase todo azul com uma faixa quente estreita no horizonte. Dá à tua cor principal 60 a 70 por cento do enquadramento e deixa as outras chegar tarde. [Paragens de cor de gradientes](https://gradiently.design/pt-pt/guide/gradient-stops) aprofunda a colocação e os pontos de transição.

- Terços iguais: `linear-gradient(180deg, #1e3a8a 0%, #7c3aed 50%, #f472b6 100%)`
- Pesado para cima: `linear-gradient(180deg, #1e3a8a 0%, #312e81 55%, #7c3aed 82%, #f472b6 100%)`

As mesmas três cores. A versão com pesos tem ambiente; a igual tem fórmula.

## 3. Luz vinda de uma direção

Um bom gradiente parece iluminado. Escolhe de onde vem a luz, normalmente um canto de cima, e faz dessa zona a mais brilhante e saturada. Tudo o resto se afasta dela. Se não consegues apontar a fonte de luz, o gradiente parece plano, sejam quais forem as cores. Um [gradiente radial](https://gradiently.design/pt-pt/guide/radial-gradient) suave sobreposto a um linear é a forma mais rápida de a acrescentar.

## 4. Um fundo que dá o ambiente

Decide se o design é escuro ou claro e assume. Um gradiente que vagueia de violeta médio a rosa médio não tem fundo, por isso parece indeciso. Uma base quase preta faz as cores brilhar; um branco quente fá-las parecer impressas. Empurra a base mais longe do que parece confortável e depois recua um passo.

- Sem fundo: `linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%)`
- Fundo escuro, canto iluminado: `radial-gradient(circle at 80% 20%, #ec4899 0%, #6d28d9 30%, #1e0b3a 65%, #0c0618 100%)`
- Fundo claro, canto iluminado: `radial-gradient(circle at 20% 20%, #fbcfe8 0%, #f5e8ff 40%, #faf7f2 80%)`

As verificações 3 e 4 juntas. Um fundo claro e uma só luz transformam uma predefinição numa cena.

## 5. Grão: a proporção certa de ruído

Os gradientes digitais perfeitamente lisos mostram riscas em muitos ecrãs e parecem predefinições de software. Uma camada fina de ruído resolve as duas coisas. O intervalo útil é estreito: abaixo de cerca de 2 por cento de opacidade não se vê, e acima de cerca de 8 por cento lê-se como textura deliberada e não como acabamento. Para gradientes escuros, começa em 3 por cento; para os pálidos, em 5 por cento, porque o ruído é mais difícil de ver em cores claras.

```css
.gradient {
  position: relative;
  background: radial-gradient(circle at 80% 20%, #ec4899 0%, #6d28d9 30%, #1e0b3a 65%, #0c0618 100%);
}

.gradient::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.04;
  mix-blend-mode: overlay;
  pointer-events: none;
}
```

Uma camada de ruído SVG em mosaico a 4 por cento. Sobe ou baixa a opacidade em passos de um enquanto observas a zona mais escura.

Há mais receitas de grão em [gradientes granulados](https://gradiently.design/pt-pt/guide/grainy-gradients) e [textura de ruído em CSS](https://gradiently.design/pt-pt/guide/css-noise-texture).

## 6. Um espaço calmo para as palavras

A maioria dos gradientes existe para transportar uma mensagem. Descobre onde vão as palavras e garante que essa zona é a mais calma e de tom mais consistente, para que cada linha tenha o mesmo contraste. A parte mais brilhante e mais movimentada do gradiente pertence a outro lado. Nunca corrijas um mau contraste com um brilho atrás das letras: move antes a luz.

Uma publicação de saldos em que parte do título assenta numa mancha brilhante do gradiente e perde contraste

Falha a verificação 6: a cor atravessa diretamente as palavras.

A mesma publicação de saldos com uma zona mais calma e uniforme atrás do título, para que todas as palavras se leiam com clareza

Passa: a zona atrás do texto é mais calma e todas as linhas se leem.

Esta é a verificação que o Gradiently faz por ti. Um Mark sabe onde estão as tuas palavras: a sua região mais calma desloca-se para trás do texto, as cores junto às letras escurecem ou clareiam, e a tinta automática escolhe texto claro ou escuro para cada linha a partir da paleta do próprio Mark.

## 7. Uma exportação que o mantém suave

- **Imagens:** exporta em PNG. A compressão JPEG transforma esbatidos longos em degraus, e as apps sociais voltam a comprimir ao carregar.
- **Vídeo:** usa um MP4 de alto débito no tamanho exato da plataforma, para que nada seja redimensionado.
- **Tamanho:** exporta nas dimensões da própria plataforma, como 1080×1350 para uma publicação do Instagram, em vez de deixares a app cortar.
- **Confirma num telemóvel:** olha para a versão carregada, num quarto escuro, com o brilho no máximo. É aí que o banding se esconde.

Se as riscas sobreviverem a tudo isto, [banding em gradientes](https://gradiently.design/pt-pt/guide/gradient-banding) tem as soluções mais profundas.

## FAQ

### Como faço um gradiente ficar bonito?

Usa cores que se misturam sem ficar cinzentas, coloca as paragens de forma desigual, ilumina-o a partir de uma direção, assume um fundo escuro ou claro, acrescenta um pouco de grão e deixa um espaço calmo para as palavras.

### Quanto ruído devo acrescentar a um gradiente?

Normalmente 2 a 6 por cento de opacidade. Começa por volta de 3 por cento em gradientes escuros e 5 por cento nos pálidos, e pára assim que as riscas desaparecerem.

### Porque é que o meu gradiente parece lamacento?

Duas cores opostas estão a misturar-se através do cinzento. Acrescenta uma cor-ponte entre elas ou mistura em OKLCH.

### Porque é que o meu gradiente parece barato?

Provavelmente são duas cores, com espaçamento igual, num ângulo de 45 graus e sem grão. Essas são as predefinições da maioria das ferramentas, por isso leem-se como pouco pensadas.

### Que formato de ficheiro é melhor para gradientes?

PNG para imagens estáticas e MP4 de alto débito para vídeo. O JPEG comprimido mostra banding em esbatidos longos e suaves.