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

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

O gradiente branco é o mais discreto de todos e o que a maioria dos designers erra um pouco. Estes códigos mostram quanta variação basta, quais tons usar e como fazer um fade limpo para branco.

## The short version

- Um gradiente branco mistura branco puro com um off-white só alguns por cento mais escuro, com tom quente, frio ou perolado.
- Off-whites com um leve tom quente lembram papel; os com leve tom azulado lembram porcelana ou neve.
- Um gradiente branco precisa de variação suficiente para sobreviver a telas de celular no brilho máximo, onde diferenças muito pequenas somem.
- Para esmaecer um conteúdo num fundo branco em CSS, use um gradiente de `rgb(255 255 255 / 0)` para `#ffffff`.
- Gradientes brancos são ótimos fundos de produto, porque uma queda suave de luz parece um estúdio iluminado, e não um recorte chapado.

Um **gradiente branco** vai do branco puro a um off-white só um pouco mais escuro, em geral com um tom suave quente, frio ou perolado. A mudança é pequena de propósito: deve parecer luz caindo sobre uma superfície, não cor. Por isso funciona tão bem em sites limpos, fotos de produto, convites e posts minimalistas. Abaixo você vê qual intensidade usar, uma paleta de off-whites, códigos para copiar e o jeito certo de fazer um fade para branco em CSS.

## Quanta variação um gradiente branco precisa

Se for pouca, ninguém vê, principalmente num celular com brilho total. Se for demais, o branco vira um cinza sujo. A tabela traz três intensidades, medidas pela distância da cor final ao branco puro. A maioria dos designs pede a do meio.

| Intensidade | De | Para | Use em |
| --- | --- | --- | --- |
| Sussurro | `#ffffff` | `#f8f8f8` | Seções grandes de site, leitura longa |
| Suave | `#ffffff` | `#efefef` | Cards, posts sociais, convites |
| Visível | `#ffffff` | `#e2e2e2` | Fundos de produto, cenários de estúdio |

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

## Cores off-white para começar

Cinzas puramente neutros no fim de um gradiente branco parecem um pouco sem vida. Um traço de tom faz a diferença: off-whites quentes lembram papel, linho e marfim; os frios lembram porcelana, geada e neve. Escolha o tom que combina com o resto da sua paleta e mantenha o mesmo 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

Off-whites. Numa página branca parecem quase iguais; lado a lado, as famílias quente e fria são bem diferentes.

## Códigos de gradiente branco

Todos começam no branco puro ou perto dele. Papel e marfim são quentes e editoriais. Porcelana e geada são frios e técnicos. Luz da manhã acrescenta um brilho suave num canto, e pérola mistura vários tons quase invisíveis para um iridescente delicado 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. Numa tela brilhante eles parecem superfícies, não cores, e é exatamente essa a ideia.

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

## Um gradiente branco atrás de produtos

Fotógrafos iluminam um fundo branco para que ele escureça suavemente em direção às bordas, o que separa o objeto do fundo sem linha de sombra. Um gradiente branco radial faz o mesmo na tela. Ele ajuda muito quando você recorta um produto da foto: um branco chapado atrás parece colado, enquanto uma varredura 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 o produto fica, caindo para um cinza claro nos cantos. Use em 2048×2048 para imagens de produto no Shopify.

[Fundos para foto de produto](https://gradiently.design/pt-br/guide/product-photo-backgrounds) fala de sombras, fundos coloridos e de quando o branco é a escolha errada.

## Fade para branco com gradiente CSS

O gradiente branco mais comum na web nem é um fundo: é um fade que suaviza o fim de um artigo cortado, a base de uma lista rolável ou a borda de uma foto. Escreva a ponta transparente como branco com opacidade zero. Os navegadores modernos misturam `transparent` direito, mas `rgb(255 255 255 / 0)` diz exatamente o que você quer e evita a faixa acinzentada que alguns motores 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 fade que termina em branco sólido pouco antes da borda inferior, para a última linha de texto sumir de forma limpa. Combine a cor final com o fundo da página.

Se o fundo da página é um off-white, e não branco puro, faça o fade para essa cor, ou ele vai terminar numa faixa mais clara visível. [Gradiente CSS transparente](https://gradiently.design/pt-br/guide/css-gradient-transparent) aprofunda fades e sobreposições.

## Branco limpo, não desbotado

### Desbotado

- Terminar num cinza neutro médio
- Mudanças tão pequenas que somem no celular
- Texto cinza claro sobre gradiente off-white
- Off-whites quentes e frios misturados
- Fade para branco numa página creme

### Limpo

- Terminar num off-white levemente tingido
- Uma mudança suave mas visível, conferida no celular
- Texto quase preto ou azul-marinho escuro
- Uma só família de tons do começo ao fim
- Fade para a cor exata do fundo da página

Gradientes brancos também formam faixas, embora menos que os escuros; se você vir degraus num monitor grande, um grão bem fino resolve, como explica [faixas em gradientes](https://gradiently.design/pt-br/guide/gradient-banding).

## Gradientes brancos em designs minimalistas

No design minimalista, tudo depende da tipografia, e o branco não deixa nada se esconder. Use uma tinta forte, quase preta, bastante espaço e um detalhe colorido. Um gradiente branco dá a dimensão exata para a página parecer iluminada e acabada. [Fundos minimalistas](https://gradiently.design/pt-br/guide/minimalist-backgrounds) traz mais ideias nessa linha, e [fundos de hero para sites](https://gradiently.design/pt-br/guide/website-hero-background) mostra como um gradiente porcelana ou luz da manhã pode sustentar uma landing page inteira.

Um convite de casamento vertical com fundo branco marfim suave e as palavras Você está convidado em letras escuras

Um convite 5×7 polegadas sobre um Mark em marfim suave. Tinta escura, margens generosas e mais nada.

No Gradiently, Marks claros funcionam como os ousados: o Mark mantém uma área calma atrás das palavras e a tinta Auto escolhe uma cor de texto escura na própria paleta do Mark, então um branco delicado nunca acaba com texto cinza que desaparece.

## FAQ

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

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

### Como fazer um gradiente de branco para transparente em CSS?

Use `linear-gradient(180deg, rgb(255 255 255 / 0), #ffffff)`. Troque a cor final pelo fundo da página se ele não for branco puro.

### Por que meu gradiente branco está invisível?

A cor final está perto demais do branco. Escureça para cerca de #efefef, com leve tom quente ou frio, e confira no celular com brilho total.

### Que cor de texto funciona sobre um gradiente branco?

Quase preto, grafite ou azul-marinho escuro. Evite texto cinza claro, que se perde na ponta mais escura do gradiente.