Fundos desfocados: o desfoque suave bem feito

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

Quanto desfoque usar

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

Para tirar a paleta de uma foto, veja paleta de cores a partir de uma imagem. No Gradiently, o Combinar com uma imagem 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. 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. 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.

3. 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. 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.

/* 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);
}

Painéis foscos sobre fundos coloridos são a base do glassmorphism, que tem regras próprias de contraste e bordas.

Alternativas ao desfoque

Um véu escuro, um painel chapado atrás das palavras ou um tratamento de duotone da foto são as outras escolhas comuns. O desfoque é o mais rápido; um fundo desenhado costuma ser o mais controlado.