# Fundos minimalistas com só o suficiente acontecendo

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

A cor chapada pode parecer inacabada; a cor agitada pode parecer desesperada. Os melhores fundos minimalistas ficam entre as duas: um matiz, um sussurro de luz, um pouco de textura e espaço para todo o resto.

## The short version

- Um fundo minimalista é um campo quase liso, geralmente um matiz com uma mudança muito sutil de luminosidade, de luz ou de textura.
- A cor chapada pura costuma parecer inacabada em telas grandes e no impresso, enquanto um leve gradiente tonal e um grão fino a fazem parecer cuidada.
- Neutros com tom, como um off-white quente ou um carvão puxado para o azul, parecem mais ricos do que branco, cinza ou preto puros.
- Mantenha pequena a diferença entre as partes mais claras e mais escuras de um fundo minimalista, para que o texto se leia por igual em todo lugar.
- Minimalismo é contenção no fundo, para que o conteúdo possa carregar o design.

Um **fundo minimalista** é um campo quase liso que sai do caminho do conteúdo: geralmente um matiz, com uma mudança bem pequena de luminosidade, um toque de luz vindo de uma direção e uma textura fina. Essa pequena dose de vida é a diferença entre um fundo que parece deliberado e um que parece que ninguém terminou. Construa-o a partir de um neutro com tom ou de uma única cor suave, mantenha estreita a faixa tonal e acrescente grão para que a superfície pareça física.

Este guia cobre a escada do chapado ao suficiente, paletas de neutros com tom, códigos de gradientes sutis e onde os fundos minimalistas funcionam melhor. Se você está decidindo entre direções, leia [minimalismo vs maximalismo](https://gradiently.design/pt-br/guide/minimalism-vs-maximalism).

## Por que a cor chapada pura costuma parecer inacabada

A cor chapada funciona perfeitamente em pequenos elementos de interface. Numa seção de destaque em tela cheia, num slide grande ou num pôster impresso, ela pode parecer uma tela vazia, porque nada na natureza é iluminado por igual. Paredes, papel e tecido de verdade têm uma leve queda de luz e uma textura fina de superfície. Acrescentar essas duas coisas, com força bem baixa, faz um campo liso se ler como um material, e não como um vazio.

| Passo | O que você acrescenta | Quanto |
| --- | --- | --- |
| 1. Chapado | Uma cor | O ponto de partida |
| 2. Tonal | Um segundo tom do mesmo matiz | Uma pequena mudança de luminosidade, poucos por cento |
| 3. Luz | Um brilho suave de um lado ou de um canto | Quase invisível; sentido, não visto |
| 4. Textura | Grão fino ou dente de papel | Visível de perto, invisível a um braço de distância |
| 5. Pare | Nada além | Mais do que isso e deixa de ser minimalista |

A escada do chapado ao suficiente. A maioria dos fundos minimalistas para no passo três ou quatro.

## Códigos de gradientes sutis para fundos minimalistas

Estes gradientes mudam muito pouco de uma ponta à outra, e esse é o ponto. Cada um mantém um só matiz e uma faixa estreita de luminosidade, então qualquer cor de texto que funcione numa ponta funciona na outra.

- Papel quente: `linear-gradient(180deg, #f7f4ee 0%, #efe9df 100%)`
- Névoa fria: `linear-gradient(160deg, #f4f6f8 0%, #e6eaef 100%)`
- Luz de linho: `radial-gradient(ellipse at 30% 20%, #f3efe9 0%, #e7e0d6 100%)`
- Sálvia pálida: `linear-gradient(180deg, #eef1ec 0%, #e1e7de 100%)`
- Brilho de grafite: `radial-gradient(ellipse at 70% 15%, #2a2d34 0%, #1b1d22 100%)`
- Tinta violeta: `linear-gradient(180deg, #1c1a22 0%, #141319 100%)`
- Ardósia verde-azulada: `linear-gradient(170deg, #1f2a2c 0%, #151e20 100%)`
- Marfim iluminado por cima: `radial-gradient(ellipse at 50% 0%, #fdfbf7 0%, #f1ece3 100%)`

Oito fundos minimalistas: quatro claros, três escuros e um iluminado por cima. As mudanças são pequenas o bastante para manter o texto uniforme e grandes o bastante para evitar um campo morto e chapado.

Os gradientes sutis são exatamente onde o banding aparece, porque as cores são tão próximas que a tela tem poucos degraus para usar entre elas. Essa é a principal razão técnica para acrescentar grão; [banding em gradientes](https://gradiently.design/pt-br/guide/gradient-banding) explica mais.

## Neutros com tom: o segredo da cor minimalista

Branco, cinza e preto puros parecem clínicos em áreas grandes. Empurrar um neutro de leve em direção a um matiz, quente para dar conforto, frio para dar precisão, verde para dar calma, faz com que ele pareça escolhido. Mantenha o tom baixo: as pessoas devem ver *off-white* ou *carvão*, não *rosa pálido* ou *azul-marinho*.

- Off-white quente: #f7f4ee
- Off-white frio: #eef1f4
- Neutro sálvia: #e9ece6
- Pedra: #d9d4cc
- Carvão azulado: #2a2d34
- Tinta violeta: #1c1a22
- Preto quente: #1f1b18

Neutros com tom para fundos minimalistas. Cada um se inclina a um matiz o suficiente para parecer intencional.

Escolha o tom a partir da cor da sua marca. Uma marca com destaque violeta parece coerente sobre um carvão puxado para o violeta; o mesmo destaque sobre um preto marrom quente parece um pouco fora do lugar. É a ideia [monocromática](https://gradiently.design/pt-br/guide/monochromatic-color-scheme) aplicada à parte mais silenciosa de um design.

## Deixando espaço para o conteúdo

Um fundo minimalista é tão bom quanto o que fica sobre ele. O trabalho dele é dar a palavras, produtos ou fotos um espaço generoso e um contraste uniforme. Isso significa mais margem do que parece necessário, um ponto focal claro e nada no fundo que compita com ele.

Um post vertical com uma linha curta de texto sobre um fundo calmo e quase liso

Uma linha, espaço generoso, um fundo com só um toque de luz.

Um post vertical com um título curto e uma pequena linha de detalhe sobre um fundo tonal calmo

Um segundo design com a mesma contenção: o espaço faz tanto trabalho quanto o texto.

### Pouco demais

- #ffffff ou #000000 puros preenchendo uma tela grande
- Sem luz, sem textura, sem mudança tonal
- Conteúdo que parece colado no nada

### O suficiente

- Um neutro com tom do matiz da marca
- Uma leve queda de luz e um grão fino
- Conteúdo que parece posto num espaço

## Onde os fundos minimalistas funcionam melhor

- **Fotos de produto e recortes:** um fundo calmo deixa a forma e o material aparecerem. Veja [fundos para foto de produto](https://gradiently.design/pt-br/guide/product-photo-backgrounds).
- **Slides com gráficos ou capturas de tela:** o conteúdo já é agitado, então o fundo não deve acrescentar nada a ele.
- **Posts de frase e de anúncio:** uma linha de texto sobre um campo calmo se lê na hora num feed cheio.
- **Sites com leitura longa:** um off-white quente parece mais suave do que branco puro numa página longa.
- **Marcas de luxo e editoriais:** espaço e contenção passam confiança.

São uma escolha mais fraca onde o próprio fundo precisa ser reconhecido, como numa marca cuja identidade é a sua cor. Ali, uma versão minimalista funciona melhor como o parceiro calmo de um destaque mais rico.

## Criando um fundo minimalista em CSS

```css
.minimal {
  background-color: #f7f4ee;
  background-image:
    radial-gradient(ellipse 80% 60% at 25% 10%, #fdfbf7, transparent 70%),
    linear-gradient(180deg, #f7f4ee, #eee8de);
  color: #1f1b18;
}

.minimal--dark {
  background-color: #1b1d22;
  background-image:
    radial-gradient(ellipse 80% 60% at 75% 5%, #2c3038, transparent 70%),
    linear-gradient(180deg, #1b1d22, #16181c);
  color: #eceae6;
}
```

Fundos minimalistas claro e escuro: uma base tonal com um brilho suave num canto. Acrescente por cima uma camada leve de ruído para dar textura.

Para a camada de textura, um ruído SVG bem leve funciona bem; [textura de ruído em CSS](https://gradiently.design/pt-br/guide/css-noise-texture) traz o código. Em páginas, mantenha o brilho longe de onde fica a coluna principal de texto e confira se os pontos mais escuros e mais claros atrás do texto ainda dão contraste forte.

Se você quer um fundo minimal que já venha com personalidade, o Mercado do Gradiently deixa você buscar Marks por palavras de cor, como “pedra quente” ou “carvão suave”. A luz, o grão e o material de um Mark fazem o trabalho do suficiente, e a região mais calma dele vai para trás das suas palavras.

## FAQ

### O que é um fundo minimalista?

Um fundo quase liso, geralmente um matiz com uma mudança muito pequena de luminosidade, um toque de luz e uma textura fina, feito para dar espaço ao conteúdo.

### Um fundo branco liso é minimalista?

Pode ser, mas o branco puro costuma parecer clínico em áreas grandes. Um off-white levemente tingido, com uma mudança tonal sutil, costuma parecer mais cuidado.

### Como faço um fundo simples parecer menos entediante?

Acrescente um pequeno gradiente tonal, um brilho suave vindo de uma direção e um grão fino, tudo com força baixa. Pare antes que qualquer um deles fique óbvio.

### Que cores funcionam em fundos minimalistas?

Neutros com tom: off-whites quentes e frios, pedra, cinzas sálvia, carvão azulado e preto quente. Incline-os em direção ao matiz da sua marca.