# Fundos desfocados: o desfoque suave bem feito

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

O desfoque empurra o fundo para trás, para que o assunto ou as palavras venham para a frente. Pouco parece acidental, demais no lugar errado parece barato. Veja como avaliar.

## The short version

- Um fundo desfocado remove detalhes para que o assunto ou o texto à frente vire o foco claro.
- O desfoque funciona melhor quando é sutil, como a pouca profundidade de campo de uma lente, ou forte o bastante para transformar o fundo em cor suave, e parece acidental no meio-termo.
- Uma foto muito desfocada vira um gradiente das próprias cores, o que é um jeito rápido de criar um fundo que combine com uma imagem.
- Imagens desfocadas costumam mostrar banding e bordas desbotadas, que um pouco de grão e uma leve ampliação resolvem.
- Um gradiente montado com as cores da foto, um véu escuro ou um painel chapado pode fazer o mesmo trabalho do desfoque com mais controle.

Um **fundo desfocado** tira detalhes para que outra coisa possa liderar: um rosto num retrato, um produto numa foto de loja, um título num post, um painel numa interface. O desfoque funciona porque o olho vai para o que estiver mais nítido. A habilidade está na quantidade. Um pouco de desfoque parece uma lente; muito transforma o fundo em cor suave; o meio-termo costuma parecer uma câmera que errou o foco.

## Quando um fundo desfocado ajuda

- **Separar um assunto.** Retratos e fotos de produto ficam mais claros quando o fundo é suave, como numa lente com abertura ampla.
- **Abrir espaço para as palavras.** Texto sobre uma foto desfocada é mais fácil de ler do que sobre uma nítida e cheia de detalhes.
- **Preencher um formato.** Uma foto horizontal colocada num story vertical precisa de algo acima e abaixo; uma cópia desfocada e ampliada da mesma foto preenche esse espaço com cores que combinam.
- **Interfaces em camadas.** Painéis de vidro fosco desfocam o que está atrás deles, então o painel parece uma camada separada e ainda insinua o conteúdo por baixo.
- **Privacidade em chamadas.** Apps de videochamada desfocam o cômodo atrás de você para que a atenção fique no seu rosto.

- Foto 1200×900 (4:3): 1200 × 900
- Story 1080×1920: 1080 × 1920

Uma foto 4:3 num story deixa grandes faixas vazias. Uma cópia desfocada e ampliada da foto atrás dela as preenche com as próprias cores da foto.

## Quanto desfoque usar

| Intensidade | Como parece | Use para |
| --- | --- | --- |
| Leve | Fundo reconhecível, suavemente fora de foco | Retratos, fotos de produto, profundidade natural |
| Média | Formas borradas, mas ainda identificáveis | Raramente: tende a parecer um erro de foco |
| Forte | Formas desaparecem, sobram só campos suaves de cor | Atrás de texto, preenchimento de formatos, fundos ambientes |

Assuma o leve ou o forte. O meio é onde o desfoque parece sem intenção.

A intensidade do desfoque é relativa ao tamanho da imagem: o mesmo raio que mal suaviza uma foto de 4.000 pixels dissolve uma de 600. Avalie a olho, no tamanho em que as pessoas vão ver. Para fundos de texto, vá forte o bastante para que nenhuma borda sobre atrás das letras, porque formas meio desfocadas ainda competem com as palavras; [texto sobre imagens](https://gradiently.design/pt-br/guide/text-over-image) explica por quê.

## Uma foto desfocada é um gradiente disfarçado

Desfoque uma foto com força e o que sobra é a cor dela, espalhada em campos suaves: um pôr do sol vira uma mistura de laranja para violeta, uma floresta vira verdes profundos com um céu pálido no alto. É por isso que fotos desfocadas dão fundos tão naturais para as imagens de onde vieram. É também uma dica: você poderia construir esse gradiente diretamente e obter a mesma harmonia, um controle mais preciso e nenhum artefato de compressão.

- Pôr do sol, totalmente desfocado: `linear-gradient(180deg, #312e81, #9d174d 45%, #f97316 75%, #fde68a)`
- Floresta, totalmente desfocada: `linear-gradient(180deg, #e0f2fe, #86efac 35%, #166534 70%, #052e16)`
- Mesa à luz de velas, desfocada: `radial-gradient(ellipse at 50% 40%, #fcd34d, #b45309 45%, #1c1917 85%)`

O que o desfoque forte deixa: a paleta da foto como gradiente. Construí-los diretamente dá resultados mais limpos.

Para tirar a paleta de uma foto, veja [paleta de cores a partir de uma imagem](https://gradiently.design/pt-br/guide/color-palette-from-image). No Gradiently, o [Combinar com uma imagem](/forge/match) faz isso em um passo: solte uma imagem e você recebe a paleta e os Marks mais próximos, ou novos feitos à semelhança dela.

## Corrigindo os problemas comuns do desfoque

1. **Amplie para esconder bordas desbotadas** O desfoque puxa transparência ou pixels escuros de fora da imagem, e as bordas ficam pálidas ou cinza. Amplie um pouco a cópia desfocada além do quadro para que as bordas suaves sejam cortadas.
2. **Acrescente grão para evitar o banding** Uma imagem muito desfocada é um conjunto de fades lentos e suaves, que fazem banding quando salvos em JPEG ou PNG de 8 bits. Uma camada leve de grão esconde os degraus; veja o [banding em gradientes](https://gradiently.design/pt-br/guide/gradient-banding).
3. **Escureça ou clareie para o texto** O desfoque remove detalhes, mas não brilho. Se o texto ainda sofre, aplique um véu escuro ou claro sobre o desfoque até o contraste se firmar.
4. **Mantenha a saturação viva** O desfoque faz a média das cores, o que pode apagá-las. Um pequeno aumento de saturação depois de desfocar traz a cor de volta.

## Fundos desfocados em CSS

Na web há duas ferramentas. `filter: blur()` desfoca um elemento, o que serve para uma cópia desfocada de uma imagem atrás da verdadeira. `backdrop-filter: blur()` desfoca o que estiver atrás de um elemento, o que faz painéis de vidro fosco. Os dois custam tempo de renderização, e o `backdrop-filter` sobre conteúdo que rola custa mais; veja o [desempenho de gradientes CSS](https://gradiently.design/pt-br/guide/css-gradient-performance).

```css
/* a blurred, enlarged copy of the cover image fills the frame */
.cover {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.cover::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--cover-image) center / cover;
  filter: blur(40px) saturate(1.2);
  transform: scale(1.15); /* crops the faded edges */
}

/* a frosted glass panel */
.panel {
  background: rgb(255 255 255 / 0.12);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
```

Defina `--cover-image` como o `url()` da imagem no elemento. A ampliação esconde as bordas pálidas que o desfoque cria.

Painéis foscos sobre fundos coloridos são a base do [glassmorphism](https://gradiently.design/pt-br/guide/glassmorphism), que tem regras próprias de contraste e bordas.

## Alternativas ao desfoque

### Desfoque

- Mantém as cores da foto automaticamente
- Pode fazer banding, desbotar nas bordas e apagar a cor
- Ainda varia em brilho atrás do texto
- Custa tempo de renderização quando ao vivo na web

### Um gradiente desenhado

- Usa a paleta da foto, escolhida de propósito
- Limpo, com grão acrescentado onde precisa
- Uma área calma e uniforme posicionada exatamente atrás do texto
- Alguns bytes de CSS, ou uma exportação nítida

Um véu escuro, um painel chapado atrás das palavras ou um tratamento de [duotone](https://gradiently.design/pt-br/guide/duotone-effect) da foto são as outras escolhas comuns. O desfoque é o mais rápido; um fundo desenhado costuma ser o mais controlado.

## FAQ

### Quando devo usar um fundo desfocado?

Quando algo à frente precisa liderar: um assunto numa foto, palavras num post, um painel numa interface ou uma foto colocada num formato que ela não preenche.

### Quanto devo desfocar um fundo?

Ou pouco, para parecer uma profundidade de campo natural, ou muito, para sobrar só cor suave. O desfoque médio tende a parecer um erro de foco.

### Por que o meu fundo desfocado tem bordas cinza?

O desfoque puxa pixels vazios ou escuros de fora da imagem. Amplie um pouco a camada desfocada além do quadro para que essas bordas sejam cortadas.

### Por que o meu fundo desfocado parece em degraus?

Fades lentos e suaves fazem banding quando salvos em formatos de 8 bits. Acrescente uma camada leve de grão antes de exportar.

### Como desfoco um fundo em CSS?

Use `filter: blur()` numa cópia da imagem atrás do conteúdo, ou `backdrop-filter: blur()` num painel para desfocar o que estiver atrás dele.