# Como usar um gerador de gradientes sem ficar igual a todo mundo

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

Geradores de gradiente são rápidos e úteis, e todos tendem a produzir os mesmos poucos visuais. A solução não é um gerador melhor; é o que você faz nos cinco minutos depois de apertar o botão.

## The short version

- Um gerador de gradientes escolhe cores, uma direção e paradas para você e depois exporta CSS ou uma imagem.
- A maioria dos resultados de geradores se parece porque partilham os mesmos padrões: duas paradas, um ângulo diagonal e cores muito saturadas.
- Partir das suas próprias cores em vez de uma paleta aleatória ou da moda é a maior mudança que você pode fazer.
- Adicionar uma terceira parada, mudar a interpolação, ajustar a direção ao layout e acrescentar grão transformam um resultado genérico em um específico.
- Sempre teste um gradiente gerado com texto real e em tamanho real antes de usá-lo.

Um **gerador de gradientes** é uma ferramenta que monta um gradiente para você: você escolhe ou sorteia as cores, define uma direção e ele exporta o código CSS ou uma imagem. É o jeito mais rápido de conseguir uma mistura bonita. É também o motivo de tantos sites, posts e apresentações compartilharem os mesmos fundos de roxo para rosa ou de azul para ciano. O problema não é o gerador. É usar a primeira resposta dele.

Este guia explica por que os resultados dos geradores convergem e apresenta seis ajustes que tornam um resultado seu. Para alguns deles você vai precisar do básico de [gradientes lineares em CSS](https://gradiently.design/pt-br/guide/css-linear-gradient).

## O que um gerador de gradientes realmente faz

A maioria dos geradores faz três coisas. Escolhe duas ou mais cores, por um seletor, um sorteio ou uma biblioteca de paletas populares. Define um tipo e uma direção, em geral linear com um ângulo. E escreve o código, normalmente um único valor `linear-gradient()`, às vezes com exportação em PNG ou SVG. Algumas ferramentas mais novas criam gradientes em malha ou em manchas, e algumas aceitam um prompt de texto.

Um resultado familiar de gerador: `linear-gradient(135deg, #667eea 0%, #764ba2 100%)`

Duas paradas saturadas a 135 graus. Bonito, e compartilhado por um número enorme de páginas.

## Por que os resultados dos geradores são todos parecidos

- **Duas paradas por padrão.** Misturas de duas cores são as mais simples de gerar e as mais fáceis de reconhecer como genéricas.
- **O mesmo ângulo.** 135 graus, do canto superior esquerdo ao inferior direito, é um padrão comum e não combina com quase nada em particular.
- **Paletas populares.** As bibliotecas mostram as combinações mais copiadas primeiro, então os gradientes mais usados são usados ainda mais.
- **Saturação máxima.** Seletores aleatórios e presets tendem a cores vivas, que impressionam em uma miniatura e agridem atrás do texto.
- **Nenhum material.** Um gradiente nu é liso, digital e chapado. Quase todo gradiente gerado tem esse acabamento.

Nenhum desses pontos está errado sozinho. Juntos, produzem um visual que pertence a todo mundo, o oposto do que uma marca precisa. O [branding com gradiente](https://gradiently.design/pt-br/guide/gradient-branding) explica por que isso importa além do gosto.

## Seis ajustes que tornam um gradiente gerado seu

1. **Parta das suas cores** Cole as cores da sua marca, ou cores coletadas de uma foto de que você gosta, em vez de sortear cores aleatórias. [Tirar uma paleta de uma imagem](https://gradiently.design/pt-br/guide/color-palette-from-image) é uma boa fonte.
2. **Adicione uma terceira parada e mova-a** Uma cor intermediária aparentada a 40% ou 60%, e não a 50%, dá forma à mistura. Agora ela se inclina, o que parece luz e não preenchimento.
3. **Mude a interpolação** Misturar em OKLCH mantém as cores vivas no meio e evita manchas cinzas. Veja [gradientes em OKLCH](https://gradiently.design/pt-br/guide/css-gradient-oklch).
4. **Ajuste a direção ao layout** Aponte a luz para onde está o conteúdo. Uma queda vertical combina com um story; um horizonte baixo combina com um banner; um brilho radial combina com a foto de um produto.
5. **Adicione grão ou um material** Uma camada de ruído fino esconde o banding e dá textura à superfície. É o caminho mais rápido do digital ao tátil.
6. **Recorte, não só preencha** Use uma parte de um gradiente maior, ou amplie-o para aparecer só uma transição suave. Recortar muda mais o clima do que trocar as cores.

- 1. O resultado do gerador: `linear-gradient(135deg, #667eea 0%, #764ba2 100%)`
- 2. Cores próprias, parada a 60%: `linear-gradient(135deg, #1e2a5a 0%, #4f46e5 60%, #c084fc 100%)`
- 3. OKLCH, caindo do topo: `linear-gradient(in oklch 170deg, #1e2a5a 0%, #4f46e5 60%, #f0abfc 100%)`
- 4. Refeito como um brilho baixo: `radial-gradient(circle at 70% 110%, #f0abfc 0%, #4f46e5 35%, #1e2a5a 70%, #0b1026 100%)`

Um gradiente gerado, editado quatro vezes. Cada passo leva menos de um minuto e o afasta mais do padrão.

## Da saída do gerador ao código de produção

Os geradores costumam exportar mais do que você precisa, ou menos. Confira o código antes de colá-lo: os navegadores modernos não precisam mais de prefixos de fabricante para gradientes, e vale acrescentar uma cor sólida de reserva para o caso raro de o gradiente não renderizar.

```css
/* Edited generator output: solid fallback, own colours, OKLCH blend */
.hero {
  background-color: #1e2a5a;
  background-image: linear-gradient(in oklch 170deg, #1e2a5a 0%, #4f46e5 60%, #f0abfc 100%);
}
```

A cor de fundo aparece se o gradiente não puder renderizar. Navegadores que não aceitam a sintaxe `in oklch` ignoram a declaração inteira, então a reserva importa.

Se o gradiente for usado em e-mail, como imagem social ou em impressão, exporte uma imagem em vez de CSS. Para imagens, gere no tamanho final, adicione grão antes de exportar e salve em PNG para evitar faixas de compressão.

## Teste antes de publicar

### Testado no gerador

- Uma pequena prévia quadrada
- Nenhum texto sobre ele
- Uma tela, brilho total
- Julgado sozinho

### Testado no uso real

- O formato de verdade, em tamanho total e em tamanho de celular
- Títulos e texto corrido reais, com o contraste conferido
- Entornos claros e escuros, várias telas
- Ao lado dos seus outros designs e dos de seus concorrentes

A maioria dos gradientes falha no contraste, e não na cor. Ponha o seu título de verdade sobre ele e confira no ponto mais claro atrás do texto. [Texto sobre gradiente](https://gradiently.design/pt-br/guide/text-on-gradient) mostra como.

## Quando um gerador não basta

Um gerador dá cor. Não dá uma superfície com material, luz e movimento, e não pode garantir que ninguém mais esteja usando o mesmo resultado. Se você quer um gradiente que pertença a você, precisa de algo que o compare com o de todo mundo.

É assim que a Forge do Gradiently funciona. Descreva um visual em uma frase ou monte-o controle por controle: até oito cores, até três materiais empilhados, luz, grão e movimento. Antes de um Mark novo ser publicado, ele é comparado com todos os outros Marks, e o que ficar próximo demais é recusado. O resultado renderiza ao vivo atrás dos seus designs e pode ter exatamente um dono.

Um Mark é um gradiente gerado levado mais longe: uma receita completa, um código público e um dono.

## FAQ

### O que é um gerador de gradientes?

Um gerador de gradientes é uma ferramenta que monta um gradiente a partir de cores escolhidas ou aleatórias e de uma direção, e o exporta como código CSS ou como imagem.

### Por que os gradientes gerados parecem genéricos?

A maioria partilha os mesmos padrões: duas paradas muito saturadas, um ângulo diagonal, nenhuma textura e cores de paletas populares. Mudar qualquer um desses pontos deixa o resultado mais distintivo.

### Preciso de prefixos de fabricante para gradientes em CSS?

Não nos navegadores atuais. Um valor linear-gradient() simples funciona, e uma background-color sólida antes dele serve de reserva.

### Devo usar CSS ou uma imagem de um gerador de gradientes?

Use CSS em sites, onde ele é leve e nítido em qualquer tamanho. Use uma imagem exportada em e-mail, posts sociais e impressão.

### Como fazer um gradiente que ninguém mais tenha?

Parta das suas próprias cores, adicione um material ou grão e use-o com consistência. No Gradiently, todo Mark novo é comparado com todos os outros antes de ser publicado e cada um tem um dono por vez.