# Fundos desfocados: desfoque suave bem feito

[Canonical HTML page](https://gradiently.design/pt-pt/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, demasiado no sítio errado parece barato. Eis como avaliar.

## The short version

- Um fundo desfocado tira pormenor para que o assunto ou o texto à frente se torne o foco claro.
- O desfoque funciona melhor quando é subtil, como a pouca profundidade de campo de uma objetiva, ou forte o suficiente para transformar o fundo em cor suave, e parece acidental pelo meio.
- Uma fotografia muito desfocada torna-se um gradiente das suas próprias cores, o que é uma forma rápida de criar um fundo que combina com uma imagem.
- As imagens desfocadas mostram muitas vezes bandas e bordos esbatidos, que um pouco de grão e uma ligeira ampliação resolvem.
- Um gradiente construído com as cores da fotografia, uma película escura ou um painel liso podem fazer o mesmo trabalho que o desfoque com mais controlo.

Um **fundo desfocado** tira pormenor para que outra coisa possa liderar: um rosto num retrato, um produto numa fotografia de loja, um título numa publicação, um painel numa interface. O desfoque funciona porque o olho vai para o que estiver mais nítido. A arte está na quantidade. Um pouco de desfoque parece uma objetiva; muito transforma o fundo em cor suave; o meio-termo costuma parecer uma câmara que falhou o foco.

## Quando um fundo desfocado ajuda

- **Separar um assunto.** Os retratos e as fotografias de produto leem-se com mais clareza quando o fundo é suave, como numa objetiva com abertura grande.
- **Abrir espaço para palavras.** O texto sobre uma fotografia desfocada lê-se mais facilmente do que sobre uma nítida e cheia de pormenor.
- **Preencher um formato.** Uma fotografia horizontal num story vertical precisa de algo por cima e por baixo; uma cópia desfocada e ampliada da mesma fotografia preenche esse espaço com cores a condizer.
- **Interfaces em camadas.** Os painéis de vidro fosco desfocam o que está atrás deles, por isso o painel lê-se como uma camada à parte, sugerindo o conteúdo por baixo.
- **Privacidade em chamadas.** As aplicações de videochamada desfocam a divisão atrás de ti para que a atenção fique no teu rosto.

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

Uma fotografia 4:3 num story deixa grandes faixas vazias. Uma cópia desfocada e ampliada da fotografia por trás preenche-as com as cores da própria fotografia.

## Quanto desfoque usar

| Intensidade | Como se vê | Usar em |
| --- | --- | --- |
| Ligeira | Fundo reconhecível, suavemente fora de foco | Retratos, fotografias de produto, profundidade natural |
| Média | Formas esborratadas mas ainda identificáveis | Raramente: tende a parecer um erro de foco |
| Forte | Formas desaparecidas, só campos suaves de cor | Atrás de texto, preenchimento de formatos, fundos ambiente |

Assume ligeira ou forte. O meio é onde o desfoque parece involuntário.

A intensidade do desfoque é relativa ao tamanho da imagem: o mesmo raio que mal suaviza uma fotografia de 4000 píxeis dissolve uma de 600. Avalia a olho, no tamanho em que as pessoas a vão ver. Para fundos de texto, usa um desfoque forte o suficiente para não restarem arestas por trás das letras, porque formas meio desfocadas continuam a competir com as palavras; o [texto sobre imagens](https://gradiently.design/pt-pt/guide/text-over-image) explica porquê.

## Uma fotografia desfocada é um gradiente disfarçado

Desfoca muito uma fotografia e o que resta é a sua cor, espalhada em campos suaves: um pôr do sol torna-se uma mistura de laranja para violeta, uma floresta torna-se verdes profundos com um céu pálido no topo. É por isso que as fotografias desfocadas dão fundos tão naturais para as imagens de onde vieram. É também uma pista: podes construir esse gradiente diretamente e obter a mesma harmonia, mais controlo e nenhum artefacto de compressão.

- Fotografia de pôr do sol, desfocada: `linear-gradient(180deg, #312e81, #9d174d 45%, #f97316 75%, #fde68a)`
- Fotografia de floresta, 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 fotografia como gradiente. Construí-los diretamente dá resultados mais limpos.

Para tirar a paleta de uma fotografia, vê [paleta de cores a partir de uma imagem](https://gradiently.design/pt-pt/guide/color-palette-from-image). Na Gradiently, [Igualar uma imagem](/forge/match) fá-lo num só passo: largas uma imagem e obténs a paleta e os Marks mais próximos, ou novos feitos à sua semelhança.

## Resolver os problemas habituais do desfoque

1. **Amplia para esconder os bordos esbatidos** O desfoque puxa transparência ou píxeis escuros de fora da imagem, e os bordos ficam pálidos ou cinzentos. Amplia ligeiramente a cópia desfocada para lá do enquadramento, para que os bordos suaves sejam cortados.
2. **Junta grão para travar as bandas** Uma imagem muito desfocada é um conjunto de esbatimentos lentos e lisos, que fazem bandas quando guardados como JPEG ou PNG de 8 bits. Uma camada leve de grão esconde os degraus; vê as [bandas em gradientes](https://gradiently.design/pt-pt/guide/gradient-banding).
3. **Escurece ou clareia para o texto** O desfoque tira pormenor, mas não brilho. Se o texto continua a ter dificuldades, põe um lavado escuro ou claro sobre o desfoque até o contraste aguentar.
4. **Mantém a saturação viva** O desfoque faz a média das cores, o que as pode esmorecer. Um pequeno reforço de saturação depois de desfocar devolve a cor.

## Fundos desfocados em CSS

Na web há duas ferramentas. `filter: blur()` desfoca um elemento, o que serve 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. Ambas custam tempo de pintura, e `backdrop-filter` sobre conteúdo que se desloca custa mais; vê o [desempenho dos gradientes CSS](https://gradiently.design/pt-pt/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);
}
```

Define `--cover-image` como o `url()` da imagem no elemento. Ampliar esconde os bordos pálidos que o desfoque cria.

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

## Alternativas ao desfoque

### Desfoque

- Mantém automaticamente as cores da fotografia
- Pode fazer bandas, esbater nos bordos e esmorecer a cor
- Continua a variar em brilho atrás do texto
- Custa tempo de pintura quando é ao vivo na web

### Um gradiente desenhado

- Usa a paleta da fotografia, escolhida de propósito
- Limpo, com grão acrescentado onde for preciso
- Uma zona calma e uniforme colocada exatamente atrás do texto
- Uns bytes de CSS, ou uma exportação nítida

Uma película escura, um painel liso atrás das palavras ou um tratamento em [duotone](https://gradiently.design/pt-pt/guide/duotone-effect) da fotografia 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 de liderar: um assunto numa fotografia, palavras numa publicação, um painel numa interface, ou uma fotografia colocada num formato que não preenche.

### Quanto devo desfocar um fundo?

Ou ligeiramente, para parecer uma profundidade de campo natural, ou com força, para restar só cor suave. O desfoque médio tende a parecer um erro de foco.

### Porque é que o meu fundo desfocado tem bordos cinzentos?

O desfoque puxa píxeis vazios ou escuros de fora da imagem. Amplia ligeiramente a camada desfocada para lá do enquadramento para cortar esses bordos.

### Porque é que o meu fundo desfocado parece em degraus?

Os esbatimentos lentos e lisos fazem bandas quando guardados em formatos de 8 bits. Acrescenta uma camada ténue de grão antes de exportar.

### Como desfoco um fundo em CSS?

Usa `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.