# Como deixar um gradiente bonito: um checklist de sete pontos

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

A maioria dos gradientes ruins falha nos mesmos poucos testes. Passe qualquer mistura por estes sete pontos, na ordem, e você vai saber exatamente o que mudar antes que alguém veja.

## The short version

- Um gradiente fica bonito quando as cores se encontram sem virar cinza, as paradas têm espaçamento desigual e a luz parece vir de um só lugar.
- Meios cinzas ou sujos aparecem quando duas cores opostas se misturam direto; adicionar uma cor de ponte ou misturar em OKLCH resolve.
- Um pouco de granulado, entre 2 e 6 por cento de opacidade, esconde as faixas e faz um gradiente digital parecer uma superfície.
- Um bom gradiente sempre deixa uma área calma onde o texto pode ficar com contraste forte.
- Exporte gradientes em PNG ou em vídeo de alta qualidade, não em JPEG comprimido, que cria listras visíveis.

Saber como deixar um gradiente bonito se resume a sete pontos, conferidos na ordem: cores que se encontram sem ficar cinza, paradas com espaçamento desigual, luz vinda de uma direção, um fundo que define o clima, um toque de granulado, um espaço calmo para o texto e uma exportação que mantém tudo suave. Cada um é um teste rápido com uma solução clara. Quase todo gradiente que parece barato falha em pelo menos dois deles, e corrigir esses dois costuma render mais do que trocar todas as cores.

| Ponto | O teste | Se falhar |
| --- | --- | --- |
| 1. Meio limpo | O ponto médio está cinza ou marrom? | Adicione uma cor de ponte ou misture em OKLCH |
| 2. Paradas desiguais | Todas as cores têm a mesma largura? | Dê a uma cor a maior parte do espaço |
| 3. Uma luz | Dá para dizer de onde vem a luz? | Clareie um lado ou um canto |
| 4. Um fundo | Ele é claramente escuro ou claramente claro? | Leve a base para mais escuro ou mais pálido |
| 5. Granulado | Dá para ver listras? | Adicione de 2 a 6 por cento de ruído |
| 6. Espaço para texto | O texto fica legível em toda parte? | Acalme a área atrás dele |
| 7. Exportação | Ele sobrevive ao upload? | PNG para imagens, bitrate alto para vídeo |

O checklist inteiro em uma página. Siga de cima para baixo; as últimas correções dependem das primeiras.

## 1. Cores que se encontram de forma limpa

Quando duas cores opostas no círculo cromático se misturam direto, o meio cai no cinza. Azul com laranja e verde com rosa são os casos clássicos. Ou adicione uma cor de ponte entre elas, para que a mistura dê a volta no círculo em vez de cruzar o centro, ou misture em um espaço de cor perceptual. [Gradientes sujos](https://gradiently.design/pt-br/guide/muddy-gradients) e [interpolação de gradiente](https://gradiently.design/pt-br/guide/gradient-interpolation) explicam os dois caminhos.

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

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

## 2. Paradas com espaçamento desigual

Cores igualmente espaçadas parecem uma rampa de predefinição. Na natureza, uma cor costuma dominar e a mudança acontece num trecho curto: o céu é quase todo azul, com uma faixa estreita e quente no horizonte. Dê à cor principal de 60 a 70 por cento do quadro e deixe as outras chegarem tarde. [Paradas de cor do gradiente](https://gradiently.design/pt-br/guide/gradient-stops) aprofunda o posicionamento e as dicas de transição.

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

As mesmas três cores. A versão com peso tem clima; a uniforme tem fórmula.

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

Um bom gradiente parece iluminado. Escolha de onde vem a luz, geralmente um canto superior, e faça dessa área a mais clara e saturada. Todo o resto se afasta dela. Se você não consegue apontar a fonte de luz, o gradiente vai parecer chapado, sejam quais forem as cores. Um [gradiente radial](https://gradiently.design/pt-br/guide/radial-gradient) suave sobre um linear é o jeito mais rápido de criar essa luz.

## 4. Um fundo que define o clima

Decida se o design é escuro ou claro, e assuma a escolha. Um gradiente que vagueia de um violeta médio para um rosa médio não tem fundo, então parece indeciso. Uma base quase preta faz as cores brilharem; um branco quente e levemente tingido faz parecerem impressas. Leve a base mais longe do que parece confortável, depois volte 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%)`

Os pontos 3 e 4 juntos. Um fundo claro de intenção e uma única luz transformam uma predefinição em cena.

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

Gradientes digitais perfeitamente lisos mostram listras em muitas telas e parecem configurações padrão de software. Uma camada fina de ruído resolve as duas coisas. A faixa útil é estreita: abaixo de uns 2 por cento de opacidade você não vê, e acima de uns 8 por cento ele vira uma textura proposital em vez de acabamento. Em gradientes escuros, comece com 3 por cento; nos pálidos, com 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 repetida a 4 por cento. Suba ou desça a opacidade um passo de cada vez, olhando a área mais escura.

Mais receitas de granulado estão em [gradientes granulados](https://gradiently.design/pt-br/guide/grainy-gradients) e [textura de ruído em CSS](https://gradiently.design/pt-br/guide/css-noise-texture).

## 6. Um espaço calmo para o texto

A maioria dos gradientes existe para levar uma mensagem. Descubra onde o texto vai ficar e garanta que essa área seja a mais calma e uniforme em tom, para que cada linha tenha o mesmo contraste. A parte mais clara e movimentada do gradiente fica em outro lugar. Nunca corrija contraste ruim com um brilho atrás das letras: mova a luz.

Um post de liquidação em que parte do título fica sobre uma área clara do gradiente e perde contraste

Falha no ponto 6: a cor passa direto pelo texto.

O mesmo post de liquidação com uma área mais calma e uniforme atrás do título, deixando todo o texto legível

Passa: a área atrás do texto é mais calma e todas as linhas ficam legíveis.

Este é o ponto que o Gradiently confere por você. Um Mark sabe onde está o seu texto: a região mais calma vai para trás dele, as cores perto das letras escurecem ou clareiam, e a tinta automática escolhe texto claro ou escuro para cada linha a partir da própria paleta do Mark.

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

- **Imagens:** exporte em PNG. A compressão JPEG transforma transições longas em degraus, e os apps sociais comprimem de novo no upload.
- **Vídeo:** use um MP4 com bitrate alto no tamanho exato da plataforma, para que nada seja redimensionado.
- **Tamanho:** exporte nas dimensões da própria plataforma, como 1080×1350 para um post no Instagram, em vez de deixar o app cortar.
- **Confira no celular:** olhe a versão publicada, num quarto escuro, com o brilho no máximo. É ali que as faixas se escondem.

Se as listras sobreviverem a tudo isso, [faixas em gradientes](https://gradiently.design/pt-br/guide/gradient-banding) traz as soluções mais profundas.

## FAQ

### Como deixar um gradiente bonito?

Use cores que se misturam sem ficar cinza, espace as paradas de forma desigual, ilumine de uma direção, assuma um fundo escuro ou claro, adicione um pouco de granulado e deixe um espaço calmo para o texto.

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

Normalmente de 2 a 6 por cento de opacidade. Comece com uns 3 por cento em gradientes escuros e 5 por cento nos pálidos, e pare assim que as listras sumirem.

### Por que meu gradiente está sujo?

Duas cores opostas estão se misturando pelo cinza. Adicione uma cor de ponte entre elas ou misture em OKLCH.

### Por que meu gradiente parece barato?

Provavelmente são duas cores, igualmente espaçadas, num ângulo de 45 graus, sem granulado. Esses são os padrões da maioria das ferramentas, então parecem pouco pensados.

### Qual o melhor formato de arquivo para gradientes?

PNG para imagens estáticas e MP4 com bitrate alto para vídeo. O JPEG comprimido mostra faixas em transições longas e suaves.