Fundos desfocados: desfoque suave bem feito

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

Quanto desfoque usar

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

Para tirar a paleta de uma fotografia, vê paleta de cores a partir de uma imagem. Na Gradiently, Igualar uma imagem 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. 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. 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.

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

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

Os painéis foscos sobre fundos coloridos são a base do glassmorphism, que tem as suas próprias regras de contraste e contornos.

Alternativas ao desfoque

Uma película escura, um painel liso atrás das palavras ou um tratamento em duotone da fotografia são as outras escolhas comuns. O desfoque é o mais rápido; um fundo desenhado costuma ser o mais controlado.