# Design com fundo branco: quando o espaço vazio é a melhor escolha

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

O fundo branco é a escolha mais comum no design e a mais fácil de errar. Veja quando ele é a decisão certa, quais brancos usar e como impedir que pareça uma página em branco.

## The short version

- Um fundo branco funciona melhor quando o conteúdo é o centro: uma foto de produto, uma leitura longa, uma lista de preços ou um único título forte.
- O branco puro #ffffff é duro nas telas para leitura longa, então a maioria dos designs bem pensados usa um off-white com um leve tom quente ou frio.
- Texto preto sobre branco tem uma razão de contraste altíssima, então você pode usar um quase-preto mais suave, como #1c1917, e ainda ler com conforto.
- O espaço em branco só parece intencional quando é generoso e consistente; um layout branco apertado parece inacabado, não minimalista.
- Um detalhe discreto, como um granulado leve, um filete fino ou uma luz suave no canto, impede que um fundo branco pareça um arquivo vazio.

O **design com fundo branco** é a melhor escolha quando o que está por cima merece toda a atenção: um produto, uma fotografia, um parágrafo longo, uma frase única que precisa pousar. Ele falha quando o branco é escolhido por padrão, porque aí parece uma página que ninguém terminou. A diferença se resume a três decisões: qual branco, quanto espaço e um pequeno detalhe que avisa ao espectador que o vazio foi de propósito.

## Quando um fundo branco é a escolha certa

O branco não tem clima próprio, e essa é a sua força. Ele sai do caminho. Isso o torna o fundo natural para tudo o que tem cor ou textura próprias e o pior fundo para o que precisa de atmosfera para se sustentar.

### O branco funciona para

- Fotos de produto em que a precisão da cor importa
- Leitura longa: artigos, cardápios, termos, relatórios
- Um único título forte, sem mais nada
- Listas de preços e tabelas comparativas
- Marcas construídas sobre contenção e clareza

### O branco sofre com

- Eventos noturnos, música e tudo o que é noturno
- Fotos claras e pálidas que se misturam à página
- Feeds em que todo concorrente já usa branco
- Posts curtos com conteúdo de menos para preencher o espaço
- Designs que precisam de calor ou drama para pousar

Se o seu design está do lado direito dessa tabela, um fundo colorido suave ou um gradiente delicado costuma servir melhor. [Fundos minimalistas](https://gradiently.design/pt-br/guide/minimalist-backgrounds) trata de opções discretas além do branco, e [design de modo escuro](https://gradiently.design/pt-br/guide/dark-mode-design) trata da ponta oposta.

## Escolha um off-white, não o branco puro

O `#ffffff` puro é a coisa mais brilhante que uma tela pode mostrar. Para um fundo de foto, tudo bem; para uma página que alguém lê por dois minutos, ofusca. Um off-white diminui um pouco o brilho e dá à página uma temperatura. Brancos quentes parecem impressos, calmos e humanos. Brancos frios parecem clínicos, técnicos e precisos. Escolha o que combina com o que você vende.

- Branco puro: #ffffff
- Papel: #faf7f2
- Linho: #f7f1e8
- Aveia: #f5f0eb
- Nuvem: #f4f6f8
- Névoa: #f1f5f4
- Tinta quente: #1c1917

Cinco off-whites ao lado do branco puro e um quase-preto quente para colocar sobre eles. As diferenças parecem minúsculas em amostras e óbvias em uma página inteira.

| Branco | Hex | Sensação | Use para |
| --- | --- | --- | --- |
| Branco puro | `#ffffff` | Brilhante, neutro | Recortes de produto, anúncios de e-commerce |
| Papel | `#faf7f2` | Impresso, calmo | Diários, newsletters, cardápios |
| Linho | `#f7f1e8` | Quente, artesanal | Padarias, floristas, papelaria |
| Nuvem | `#f4f6f8` | Frio, preciso | Software, finanças, clínicas |
| Névoa | `#f1f5f4` | Fresco, limpo | Cuidados com a pele, bem-estar, odontologia |

Escolha um branco pela temperatura. Depois mantenha-o em todo lugar: um site, uma apresentação e um post em três brancos diferentes parecem três marcas.

## Dê espaço às palavras

O espaço em branco não é o que sobra. É uma decisão de layout, e só parece intencional quando é generoso. Uma regra prática: margens de pelo menos 8 por cento do lado menor, ou seja, 86 px em um post de 1080×1350, e mais espaço entre os grupos do que dentro deles. Um título, uma linha curta embaixo e um pequeno detalhe na base já bastam para um post.

Um post retrato calmo com um título curto centralizado em um generoso espaço vazio

Uma linha, um pequeno texto de apoio e um detalhe discreto. O espaço carrega tanto significado quanto as palavras.

Um post retrato com horários de funcionamento, com margens largas ao redor de um bloco curto de texto

Um post prático continua calmo quando as margens ficam largas e a letra fica pequena.

A hierarquia importa mais no branco do que em qualquer outro lugar, porque não há cor para guiar o olhar. Use tamanho e peso para ordenar as palavras, como descrito em [hierarquia visual](https://gradiently.design/pt-br/guide/visual-hierarchy), e fique em uma só família tipográfica, se puder.

## Cor do texto sobre um fundo branco

Preto puro sobre branco puro tem o maior contraste que uma tela pode mostrar, mais do que a leitura precisa, e pode parecer áspero. Um quase-preto com um toque da temperatura do fundo, como `#1c1917` sobre um branco quente ou `#0f172a` sobre um frio, ainda passa em todos os limites de acessibilidade com folga. Para o texto do corpo, mantenha uma razão de contraste de pelo menos 4,5:1; [contraste de cores e acessibilidade](https://gradiently.design/pt-br/guide/color-contrast-accessibility) explica como conferir.

> **Texto cinza claro é o erro clássico** Letra cinza sobre um off-white fica elegante em um arquivo de design e some em um celular sob o sol. Se uma linha importa, mantenha-a escura. Use o tamanho, e não a palidez, para deixar o texto secundário mais discreto.

## Como impedir que um fundo branco pareça inacabado

O risco do branco é parecer uma tela vazia em vez de uma escolhida. Um único detalhe discreto basta para corrigir isso. Escolha um, não todos.

- **Um granulado leve** em intensidade bem baixa, para o branco ser lido como uma superfície. Veja [textura granulada](https://gradiently.design/pt-br/guide/textured-background).
- **Uma luz suave no canto**, um branco quente que se esvai em um creme um pouco mais profundo em um canto.
- **Um filete fino** ou borda delicada na cor da sua tinta, de poucos pixels de largura.
- **Uma cor de destaque** usada uma vez, em um preço, uma data ou um botão.
- **Um ar de papel** para marcas impressas ou artesanais; [textura de papel](https://gradiently.design/pt-br/guide/paper-texture-background) mostra como.

- Papel com um canto quente: `radial-gradient(circle at 85% 10%, #fde9d4 0%, #faf7f2 45%, #f7f1e8 100%)`
- Branco a nuvem: `linear-gradient(180deg, #ffffff 0%, #f4f6f8 100%)`
- Névoa com luz no topo: `radial-gradient(ellipse at 50% 0%, #ffffff 0%, #f1f5f4 70%, #e6efec 100%)`

Três brancos que mal chegam a ser gradientes. No celular, eles se leem como branco com profundidade, nunca como cor.

## Um fundo branco em CSS

Na web, defina o off-white uma vez como variável para que todas as seções o compartilhem e dê às imagens um fundo equivalente, para que fotos de produto em branco puro não apareçam como caixas contra a cor do seu papel.

```css
:root {
  --paper: #faf7f2;
  --ink: #1c1917;
  --rule: #e7e1d8;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
}

/* Product photos shot on pure white: blend them into the paper */
.product img {
  mix-blend-mode: multiply;
}

hr {
  border: 0;
  border-top: 1px solid var(--rule);
}
```

`mix-blend-mode: multiply` faz o branco ao redor de uma foto de produto assumir a cor da página, então os recortes ficam naturais sobre um off-white.

Se você quer um visual branco com um pouco mais de personalidade, os Marks claros do Gradiently são um bom ponto de partida: fundos suaves e pálidos com material e luz de verdade, em que a área mais calma vai para trás das suas palavras e a **tinta automática** mantém cada linha escura o bastante para ser lida. Criar com qualquer Mark não reservado é grátis; reserve o que você gostar quando estiver pronto para exportar.

## FAQ

### Qual o melhor código de cor off-white para um fundo?

Um branco-papel quente como `#faf7f2` serve à maioria das marcas editoriais e de estilo de vida, e um branco frio como `#f4f6f8` serve a marcas de software e clínicas. Escolha um e use em todo lugar.

### O branco puro é ruim para sites?

Não é ruim, mas é brilhante. O branco puro é ideal atrás de recortes de produto; para leitura longa, um off-white levemente tingido é mais gentil com os olhos.

### Que cor de texto fica melhor sobre um fundo branco?

Um quase-preto como `#1c1917` ou `#0f172a`. Ele se lê como preto, mantém o contraste bem acima de 4,5:1 e parece mais suave do que o preto puro.

### Como deixar um fundo branco menos sem graça?

Acrescente um detalhe discreto: granulado leve, uma luz suave no canto, um filete fino ou uma única cor de destaque. Mantenha as margens generosas para o espaço parecer escolhido.

### Por que minhas fotos de produto aparecem em uma caixa no meu site off-white?

As fotos foram feitas sobre branco puro. Use `mix-blend-mode: multiply` nas imagens ou exporte-as com fundo transparente.