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

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

A maioria dos fundos em gradiente parece igual porque parte das mesmas poucas predefinições. Eis um método em cinco passos para fazer um que pareça pensado, com códigos que podes copiar.

## The short version

- Um bom fundo em 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 planeado para as palavras.
- A maioria dos fundos em gradiente parece genérica porque são predefinições de duas cores nos mesmos tons populares, misturadas numa diagonal reta.
- Uma base escura ou clara decide o ambiente mais do que qualquer cor isolada, por isso escolhe-a primeiro.
- Um pouco de grão esconde as faixas e faz um gradiente digital parecer uma superfície e não uma predefinição do ecrã.
- Renderiza o fundo para cada formato em vez de cortar uma imagem, para que a zona mais clara caia sempre onde o design precisa.

Para fazer um **fundo em gradiente** que não pareça genérico, escolhe primeiro uma cor de base, acrescenta três a cinco cores relacionadas em vez de duas, dá à superfície um material como grão ou luz suave, e guarda uma zona calma onde as palavras vão ficar. A maioria dos fundos em gradiente salta todos estes passos: pega numa predefinição de duas cores, estica-a de canto a canto e para. É por isso que tantos parecem intermutáveis.

## Porque é que a maioria dos fundos em gradiente parece igual

As ferramentas de design, os geradores e os modelos oferecem todos a mesma lista curta de transições, e as tendências empurram toda a gente para os mesmos tons ao mesmo tempo. Violeta para rosa, azul para ciano e laranja para magenta são agradáveis, mas são tão usados que se leem como uma predefinição e não como uma escolha. O padrão mais amplo está explicado em [porque é que todos os feeds parecem iguais](https://gradiently.design/pt-pt/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

### Pensado

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

## Passo 1: escolhe uma base

A base é a cor sobre a qual o gradiente assenta e à qual regressa. Define o ambiente mais do que qualquer destaque. Uma base quase preta faz a cor brilhar e parece premium e noturna; uma base quente em branco sujo parece impressa, calma e editorial. Escolhe-a antes de escolher um único destaque e mantém-na em todo o conjunto de designs.

- Base escura, luz violeta: `radial-gradient(circle at 75% 20%, #7c3aed 0%, #2e1065 35%, #0c0a1d 75%)`
- Base 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ó tem de brilhar.

Se escolheres escuro, lê [fundos em gradiente escuros](https://gradiently.design/pt-pt/guide/dark-gradient-backgrounds) antes de exportar, porque é nas transições escuras que as faixas mais se notam.

## Passo 2: escolhe 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 tom mais claro e um destaque usado com parcimónia. Mantém as vizinhas próximas na roda das cores para que as transições fiquem limpas, e deixa o destaque à parte. Cores opostas lado a lado ficam cinzentas onde se encontram, como explicam os [gradientes sujos](https://gradiently.design/pt-pt/guide/muddy-gradients).

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

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

## Passo 3: dá-lhe um material

Uma transição digital limpa parece uma predefinição do ecrã. Um material fá-la parecer uma superfície. O grão lê-se como película ou impressão, a textura de papel como artesanato, um brilho vítreo como tecnologia e uma seda suave como luxo. Não é preciso muito: uma camada de ruído com pouca opacidade chega para mudar a sensação. A [textura em gradientes](https://gradiently.design/pt-pt/guide/gradient-texture) compara as famílias, e os [gradientes com grão](https://gradiently.design/pt-pt/guide/grainy-gradients) têm o código.

## Passo 4: planeia onde ficam as palavras

Um fundo existe para transportar algo: um título, um preço, uma data. Decide onde ficam essas palavras antes de acabar o gradiente e mantém essa zona mais calma e com mais contraste. Põe a cor mais clara e mais agitada longe do texto, normalmente num canto, e deixa a base aparecer por trás das palavras. Para as regras de contraste, vê [contraste de cor e acessibilidade](https://gradiently.design/pt-pt/guide/color-contrast-accessibility).

Uma publicação de evento em que o título fica sobre a zona mais clara do gradiente e é difícil de ler

Cor espalhada por igual significa que a parte mais clara pode cair mesmo por trás das palavras.

A mesma publicação de evento com uma zona mais calma e escura do gradiente por trás do título

Com uma zona calma por trás do texto, o mesmo fundo transmite a mensagem.

## Passo 5: renderiza-o para cada formato

Um gradiente que fica bem numa publicação quadrada pode ficar mal numa story vertical, porque o corte move a zona clara. Trata o fundo como uma receita que renderizas em cada tamanho, ajustando onde a luz cai, e não como uma única imagem que cortas.

- Publicação 1080×1350: 1080 × 1350
- Story 1080×1920: 1080 × 1920
- Imagem principal do site 1920×1080: 1920 × 1080
- Banner de blogue 1200×600: 1200 × 600

Quatro tamanhos de fundo comuns. A luz deve cair num sítio sensato em cada um, e não onde um corte a deixar.

## Um fundo em gradiente em CSS

Na web, um gradiente de página inteira tem um erro clássico: se a página for curta, o fundo repete-se em faixas. Dá ao elemento raiz uma altura mínima, define uma cor lisa de reserva que também aparece ao deslizar para lá do limite, e depois sobrepõe 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 vinda do canto superior direito e uma sombra índigo no canto inferior esquerdo. Junta uma camada de grão por cima para o acabar.

Para uma secção principal em vez de uma página inteira, as mesmas camadas funcionam na própria secção. Os [fundos para a secção principal de um site](https://gradiently.design/pt-pt/guide/website-hero-background) tratam de dimensões e desempenho.

## Ter o teu próprio fundo em gradiente

Mesmo um fundo feito com cuidado pode ser copiado e reutilizado. Na Gradiently, um fundo acabado é um Mark: uma receita de cores, materiais, luz, grão e movimento com exatamente um dono de cada vez. É renderizado em cada tamanho em que desenhas e abre espaço para as tuas palavras sozinho. Podes desenhar com qualquer Mark de graça e reservar um para o tornares teu.

## FAQ

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

Começa com uma cor de base, usa três a cinco cores relacionadas em vez de duas, junta grão ou outro material e planeia uma zona calma para as palavras.

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

Cores próximas na roda das cores misturam-se de forma limpa. Junta um destaque contrastante numa pequena zona para dar interesse.

### Porque é que o meu fundo em gradiente CSS se repete em faixas pela página abaixo?

O elemento raiz é mais baixo do que a janela, por isso o gradiente repete-se em mosaico. Define `min-height: 100%` no `html` e `min-height: 100vh` no `body`.

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

Ambos funcionam. As bases escuras fazem a cor brilhar e parecem premium; as bases claras parecem impressas e calmas. Escolhe uma e mantém-na coerente.

### Como evito faixas num fundo em gradiente?

Junta uma camada leve de grão e evita compressão JPEG forte. Os gradientes escuros e subtis são os que mais criam faixas.