# Como fazer um fundo de gradiente que não pareça genérico

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

A maioria dos fundos de gradiente é parecida porque parte das mesmas poucas predefinições. Aqui está um método de cinco passos para fazer um fundo bem pensado, com códigos para copiar.

## The short version

- Um bom fundo de gradiente começa com uma cor de base, uma pequena família de três a cinco cores relacionadas, um material ou textura e um lugar planejado para as palavras.
- A maioria dos fundos de gradiente parece genérica porque são predefinições de duas cores nos mesmos matizes populares, misturadas numa diagonal reta.
- Uma base escura ou clara decide o clima mais do que qualquer cor isolada, então escolha-a primeiro.
- Um pouco de grão esconde o banding e faz um gradiente digital parecer uma superfície e não um padrão de tela.
- Renderize o fundo para cada formato em vez de recortar uma só imagem, para que a área mais brilhante sempre caia onde o design precisa.

Para fazer um **fundo de gradiente** que não pareça genérico, escolha primeiro uma cor de base, acrescente de três a cinco cores relacionadas em vez de duas, dê à superfície um material como grão ou luz suave e mantenha uma área calma onde as palavras ficarão. A maioria dos fundos de gradiente pula todos esses passos: pega uma predefinição de duas cores, corre de canto a canto e para. É por isso que tantos parecem intercambiáveis.

## Por que a maioria dos fundos de gradiente parece igual

Ferramentas de design, geradores e templates oferecem a mesma lista curta de misturas, e as tendências empurram todo mundo para os mesmos matizes ao mesmo tempo. Violeta a rosa, azul a ciano e laranja a magenta são agradáveis, mas são tão usados que se leem como um padrão e não como uma escolha. O padrão mais amplo é explicado em [por que todo feed parece igual](https://gradiently.design/pt-br/guide/why-every-feed-looks-the-same).

### Genérico

- Duas cores saturadas de uma predefinição
- Uma diagonal reta de 45 graus
- Superfície digital perfeitamente limpa
- Cor espalhada por igual, sem lugar para palavras
- Uma imagem esticada para todos os tamanhos

### Bem pensado

- Uma base mais uma família de três a cinco cores
- Luz que vem de algum lugar
- Grão, papel ou brilho na superfície
- Uma zona calma planejada para o título
- Renderizado de novo para cada formato

## Passo 1: escolha uma base

A base é a cor sobre a qual o gradiente fica e à qual ele volta. Ela define o clima mais do que qualquer destaque. Uma base quase preta faz a cor brilhar e parece premium e noturna; uma base off-white quente parece impressa, calma e editorial. Escolha uma antes de escolher um único destaque e mantenha-a para o conjunto todo de designs.

- Base escura, luz violeta: `radial-gradient(circle at 75% 20%, #7c3aed 0%, #2e1065 35%, #0c0a1d 75%)`
- Base de papel, luz pêssego: `radial-gradient(circle at 25% 25%, #fed7aa 0%, #fdf2e9 45%, #f7f1ea 80%)`
- Base verde-profundo, luz verde-azulada: `radial-gradient(circle at 70% 80%, #0d9488 0%, #134e4a 40%, #071a1a 80%)`

Três bases com uma cor iluminada cada. A base faz a maior parte do trabalho; o destaque só precisa brilhar.

Se você escolher a escura, leia os [fundos de gradiente escuros](https://gradiently.design/pt-br/guide/dark-gradient-backgrounds) antes de exportar, porque nas misturas escuras é onde o banding mais aparece.

## Passo 2: escolha de três a cinco cores relacionadas

Duas cores são o gradiente mais fácil de fazer e o mais fácil de copiar. Uma pequena família dá profundidade: um tom de sombra, um tom principal, um realce e um destaque usado com parcimônia. Mantenha as vizinhas próximas no círculo cromático para que as misturas fiquem limpas e deixe o destaque à parte. Cores opostas lado a lado ficam cinzentas onde se encontram, o que é tratado nos [gradientes sujos](https://gradiently.design/pt-br/guide/muddy-gradients).

- Base de tinta: #0f0b1e
- Sombra índigo: #312e81
- Violeta principal: #6d28d9
- Realce lilás: #c084fc
- Destaque brasa: #fb923c

Uma base, três violetas ligados e um destaque quente. A brasa aparece só num pequeno lugar, e é exatamente por isso que se nota.

## Passo 3: dê um material

Uma mistura digital limpa parece um padrão de tela. Um material a faz parecer uma superfície. O grão lembra filme ou impressão, a textura de papel lembra artesanato, um brilho vítreo lembra tecnologia e uma seda suave lembra luxo. Você não precisa de muito: uma camada de ruído em baixa opacidade basta para mudar a sensação. A [textura de gradiente](https://gradiently.design/pt-br/guide/gradient-texture) compara as famílias, e os [gradientes com grão](https://gradiently.design/pt-br/guide/grainy-gradients) trazem o código.

## Passo 4: planeje onde vão as palavras

Um fundo existe para carregar algo: um título, um preço, uma data. Decida onde essas palavras ficam antes de terminar o gradiente e mantenha essa área mais calma e de maior contraste. Ponha a cor mais brilhante e agitada longe do texto, em geral num canto, e deixe a base aparecer atrás das palavras. Para as regras de contraste, veja o [contraste de cores e acessibilidade](https://gradiently.design/pt-br/guide/color-contrast-accessibility).

Um post de evento em que o título fica sobre a área mais brilhante do gradiente e é difícil de ler

Cor espalhada por igual significa que a parte mais brilhante pode cair bem atrás das palavras.

O mesmo post de evento com uma área mais calma e escura do gradiente atrás do título

Com uma zona calma atrás do texto, o mesmo fundo carrega a mensagem.

## Passo 5: renderize para cada formato

Um gradiente que fica certo como post quadrado pode ficar errado como story vertical, porque o recorte move a área brilhante. Trate o fundo como uma receita que você renderiza em cada tamanho, ajustando onde a luz cai, e não como uma imagem única que você recorta.

- Post 1080×1350: 1080 × 1350
- Story 1080×1920: 1080 × 1920
- Herói de site 1920×1080: 1920 × 1080
- Banner de blog 1200×600: 1200 × 600

Quatro tamanhos de fundo comuns. A luz deve cair num lugar sensato em cada um, e não onde um recorte a deixar.

## Um fundo de gradiente em CSS

Na web, um gradiente de página inteira tem um bug clássico: se a página é curta, o fundo se repete em faixas. Dê ao elemento raiz uma altura mínima, defina uma cor de reserva sólida que também aparece durante o overscroll e depois sobreponha o gradiente.

```css
html {
  min-height: 100%;
  background-color: #0f0b1e; /* fallback, and the colour seen on overscroll */
}

body {
  min-height: 100vh;
  margin: 0;
  background-image:
    radial-gradient(circle at 80% 15%, #6d28d9 0%, transparent 45%),
    radial-gradient(circle at 10% 90%, #312e81 0%, transparent 50%),
    linear-gradient(160deg, #0f0b1e 0%, #1e1640 100%);
}
```

Uma base escura, uma luz violeta no canto superior direito e uma sombra índigo no canto inferior esquerdo. Acrescente uma camada de grão por cima para terminar.

Para uma seção de herói e não uma página inteira, as mesmas camadas funcionam na própria seção. Os [fundos de herói para sites](https://gradiently.design/pt-br/guide/website-hero-background) tratam de tamanho e desempenho.

## Sendo dono do seu fundo de gradiente

Mesmo um fundo feito com cuidado pode ser amostrado e reutilizado. No Gradiently, um fundo finalizado é um Mark: uma receita de cores, materiais, luz, grão e movimento com exatamente um dono por vez. Ele é renderizado em todo tamanho em que você cria e abre espaço para as suas palavras sozinho. Você pode criar com qualquer Mark de graça e reservar um para torná-lo seu.

## FAQ

### Como faço um fundo de gradiente parecer menos genérico?

Comece com uma cor de base, use de três a cinco cores relacionadas em vez de duas, acrescente grão ou outro material e planeje uma área calma para as palavras.

### Que cores fazem um bom fundo de gradiente?

Cores próximas no círculo cromático se misturam com limpeza. Acrescente um destaque contrastante numa área pequena para dar interesse.

### Por que o meu fundo de gradiente em CSS se repete em listras ao longo da página?

O elemento raiz é mais curto que a janela, então o gradiente se repete em ladrilhos. Defina `min-height: 100%` no `html` e `min-height: 100vh` no `body`.

### Um fundo de gradiente deve ser escuro ou claro?

Os dois funcionam. Bases escuras fazem a cor brilhar e parecem premium; bases claras parecem impressas e calmas. Escolha uma e mantenha a consistência.

### Como evito o banding num fundo de gradiente?

Acrescente uma camada leve de grão e evite compressão JPEG pesada. Os gradientes escuros e sutis são os que mais fazem banding.