# Gradiente branco: códigos de luz subtil para designs limpos

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

O gradiente branco é o mais discreto de todos, e aquele que a maioria dos designers acerta só a meio. Estes códigos mostram quanta mudança basta, que tons usar e como esbater para branco sem falhas.

## The short version

- Um gradiente branco mistura branco puro com um branco sujo apenas uns pontos percentuais mais escuro, com tom quente, frio ou perolado.
- Os brancos sujos com um leve tom quente lembram papel; os de leve tom azulado lembram porcelana ou neve.
- Um gradiente branco precisa de amplitude suficiente para sobreviver a ecrãs de telemóvel muito luminosos, onde as diferenças minúsculas desaparecem.
- Para esbater conteúdo para um fundo branco em CSS, usa um gradiente de `rgb(255 255 255 / 0)` para `#ffffff`.
- Os gradientes brancos são excelentes fundos de produto, porque uma queda suave de luz parece um estúdio iluminado e não um recorte plano.

Um **gradiente branco** vai do branco puro a um branco sujo só ligeiramente mais escuro, normalmente com um tom suave quente, frio ou perolado. A mudança é pequena de propósito: deve parecer luz a cair sobre uma superfície, não cor. Por isso os gradientes brancos são ideais para sites limpos, fotografias de produto, convites e publicações minimalistas. Aqui encontras a intensidade certa, uma paleta de brancos sujos, códigos para copiar e a forma correta de esbater para branco em CSS.

## Quanta mudança precisa um gradiente branco

Se for pouca, ninguém a vê, sobretudo num telemóvel com o brilho no máximo. Se for demasiada, o branco fica cinzento e sujo. A tabela mostra três intensidades, medidas pela distância da cor final ao branco puro. A maioria dos designs pede a do meio.

| Intensidade | De | Para | Usa em |
| --- | --- | --- | --- |
| Sussurro | `#ffffff` | `#f8f8f8` | Grandes secções web, leitura longa |
| Suave | `#ffffff` | `#efefef` | Cartões, publicações sociais, convites |
| Visível | `#ffffff` | `#e2e2e2` | Fundos de produto, cenários de estúdio |

Valores neutros, para maior clareza. Na prática, dá à cor final um leve tom quente ou frio, como nos códigos abaixo.

## Brancos sujos para começar

Os cinzentos neutros no fim de um gradiente branco ficam um pouco sem vida. Um vestígio de tom faz toda a diferença: os brancos quentes lembram papel, linho e marfim; os frios lembram porcelana, geada e neve. Escolhe o tom que condiz com o resto da paleta e mantém-no em todo o conjunto de designs.

- Branco puro: #ffffff
- Marfim: #fffdf8
- Papel: #f6f4f0
- Linho: #f1ece3
- Porcelana: #f1f4f7
- Geada: #eaf2f8
- Pérola lilás: #f3eef8
- Pérola menta: #eef6f6

Brancos sujos. Numa página branca parecem quase iguais; lado a lado, as famílias quente e fria distinguem-se bem.

## Códigos de gradiente branco

Todos começam no branco puro ou perto dele. O papel e o marfim são quentes e editoriais. A porcelana e a geada são frias e técnicas. A luz da manhã acrescenta um brilho suave a partir de um canto, e a pérola mistura vários tons quase invisíveis para uma iridescência delicada que nunca vira arco-íris.

- Papel: `linear-gradient(180deg, #ffffff 0%, #f6f4f0 100%)`
- Marfim: `linear-gradient(150deg, #fffdf8 0%, #f8f1e4 100%)`
- Porcelana: `linear-gradient(160deg, #ffffff 0%, #f1f4f7 60%, #e6ebf0 100%)`
- Geada: `linear-gradient(180deg, #f8fbfd 0%, #eaf2f8 100%)`
- Luz da manhã: `radial-gradient(ellipse at 20% 0%, #ffffff 0%, #fbf8f2 45%, #f1ece3 100%)`
- Pérola: `linear-gradient(135deg, #fdfcfb 0%, #f3eef8 35%, #eef6f6 65%, #fbf7f0 100%)`

Seis gradientes brancos. Num ecrã luminoso lêem-se como superfícies e não como cores, e é precisamente essa a ideia.

Se quiseres um pouco mais de cor mantendo a mesma leveza, os [gradientes pastel](https://gradiently.design/pt-pt/guide/pastel-gradients) são o passo seguinte. Para o extremo oposto da escala neutra, vê os códigos de [gradiente cinzento](https://gradiently.design/pt-pt/guide/grey-gradient).

## Um gradiente branco por trás de produtos

Os fotógrafos iluminam um fundo branco para que a luz caia suavemente em direção às margens, o que separa o objeto do fundo sem linha de sombra. Um gradiente branco radial faz o mesmo no ecrã. É especialmente útil quando recortas um produto da fotografia: um branco liso atrás parece colado, ao passo que uma queda suave parece estúdio.

Cenário de estúdio: `radial-gradient(ellipse at 50% 35%, #ffffff 0%, #f3f3f3 55%, #e2e2e2 100%)`

Mais claro logo acima do centro, onde assenta o produto, e a cair para um cinzento claro nos cantos. Usa-o a 2048×2048 para imagens de produto no Shopify.

Os [fundos para fotografias de produto](https://gradiently.design/pt-pt/guide/product-photo-backgrounds) tratam de sombras, fundos de cor e dos casos em que o branco é a escolha errada.

## Esbater para branco com um gradiente CSS

O gradiente branco mais comum na web nem sequer é um fundo: é um esbatido que suaviza o fim de um artigo truncado, a base de uma lista com scroll ou a margem de uma fotografia. Escreve a extremidade transparente como branco com opacidade zero. Os navegadores modernos misturam `transparent` corretamente, mas `rgb(255 255 255 / 0)` diz exatamente o que queres e evita a faixa acinzentada que alguns motores mais antigos desenhavam.

```css
/* soften the end of a clipped block of text */
.excerpt {
  position: relative;
  max-height: 12rem;
  overflow: hidden;
}

.excerpt::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 5rem;
  background: linear-gradient(180deg, rgb(255 255 255 / 0) 0%, #ffffff 90%);
  pointer-events: none;
}
```

Um esbatido que termina em branco sólido mesmo antes da margem inferior, para que a última linha de texto desapareça sem cortes. Faz coincidir a cor final com o fundo da tua página.

Se o fundo da tua página for um branco sujo e não branco puro, esbate para essa cor, ou o esbatido acabará numa faixa mais clara visível. O artigo sobre [gradiente CSS transparente](https://gradiently.design/pt-pt/guide/css-gradient-transparent) aprofunda esbatidos e sobreposições.

## Branco limpo, não desbotado

### Desbotado

- Acabar num cinzento médio neutro
- Mudanças tão pequenas que somem no telemóvel
- Texto cinzento claro sobre um gradiente branco sujo
- Misturar brancos sujos quentes e frios
- Esbater para branco numa página cor de creme

### Limpo

- Acabar num branco sujo com um leve tom
- Uma mudança suave mas visível, testada no telemóvel
- Texto quase preto ou azul-marinho profundo
- Uma só família de tons do princípio ao fim
- Esbater para a cor exata do fundo da página

Os gradientes brancos também formam faixas, embora menos do que os escuros; se vires degraus num monitor grande, um grão muito fino resolve, como se explica em [faixas no gradiente](https://gradiently.design/pt-pt/guide/gradient-banding).

## Gradientes brancos em designs minimalistas

Os designs minimalistas vivem ou morrem pela tipografia, e o branco não lhe dá onde se esconder. Usa uma tinta forte, quase preta, muito espaço e um detalhe de cor. Um gradiente branco acrescenta a dimensão certa para a página parecer iluminada e acabada. Os [fundos minimalistas](https://gradiently.design/pt-pt/guide/minimalist-backgrounds) trazem mais ideias no mesmo espírito, e os [fundos de cabeçalho para sites](https://gradiently.design/pt-pt/guide/website-hero-background) mostram como um gradiente porcelana ou luz da manhã pode sustentar uma página de destino inteira.

Um convite de casamento vertical com fundo branco marfim suave e as palavras Estás convidado em letras escuras

Um convite de 5×7 polegadas num Mark suave cor de marfim. Tinta escura, margens generosas e mais nada.

No Gradiently, os Marks claros funcionam como os arrojados: o Mark deixa uma zona calma atrás das palavras e a Tinta automática escolhe uma cor de texto escura a partir da paleta do próprio Mark, para que um branco delicado nunca acabe com texto cinzento que desaparece.

## FAQ

### Qual é um bom código de gradiente branco?

Para um aspeto suave de papel, experimenta `linear-gradient(180deg, #ffffff 0%, #f6f4f0 100%)`. Para um aspeto frio de porcelana, termina em #e6ebf0.

### Como faço um gradiente de branco para transparente em CSS?

Usa `linear-gradient(180deg, rgb(255 255 255 / 0), #ffffff)`. Muda a cor final para a do fundo da página se não for branco puro.

### Porque é que o meu gradiente branco é invisível?

A cor final está demasiado perto do branco. Escurece-a para cerca de #efefef, com um leve tom quente ou frio, e confirma num telemóvel com o brilho no máximo.

### Que cor de texto funciona num gradiente branco?

Quase preto, carvão ou azul-marinho profundo. Evita texto cinzento claro, que se perde na extremidade mais escura do gradiente.