Backdrop filter em CSS: vidro fosco que se mantém rápido

Um backdrop filter em CSS aplica um efeito gráfico, normalmente desfoque, ao que está por trás de um elemento. Escreve backdrop-filter: blur(12px) num elemento com um fundo parcialmente transparente e a página por baixo suaviza-se, que é o aspeto de vidro fosco usado em barras de navegação, painéis e cartões. É suportado em todos os navegadores atuais. A arte está em manter a área desfocada pequena, o raio modesto e a alternativa legível.

A receita básica de vidro fosco

Três coisas fazem o vidro: um preenchimento translúcido para o fundo se ver, o próprio desfoque e uma margem ténue para o painel ter forma. A maioria das pessoas acrescenta também um pequeno reforço de saturação, porque desfocar faz a média das cores e deixa-as mais cinzentas do que esperas.

.glass {
  background: rgb(255 255 255 / 0.14);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgb(255 255 255 / 0.22);
  border-radius: 16px;
}

O vidro só parece vidro quando há algo que valha a pena desfocar por trás. Numa página cinzenta lisa, o painel limita-se a parecer escuro. Põe-no sobre uma fotografia ou um gradiente rico, como o glassmorphism explica com mais profundidade.

O que as funções de backdrop-filter podem fazer

A propriedade aceita as mesmas funções que filter, e podes encadeá-las numa só declaração. Aplicam-se por ordem, da esquerda para a direita, por isso blur() e depois saturate() comporta-se de forma diferente do inverso. A lista completa está na MDN.

Desempenho do backdrop filter

O desfoque é uma das coisas mais caras que um navegador desenha. Para desfocar uma região, tem de ler cada píxel por trás do elemento, amostrar os vizinhos até ao raio de desfoque e compor o resultado, e repete esse trabalho sempre que algo por trás do painel muda. Um cabeçalho fixo sobre uma página em deslocação redesenha o desfoque em cada fotograma do deslocamento.

O custo escala com dois números que controlas: a área do elemento e o raio. Um cabeçalho de 64 píxeis desfocado a 12px é barato em quase tudo. Uma sobreposição de ecrã inteiro desfocada a 40px sobre um vídeo pode perder fotogramas num telemóvel de gama média. O panorama mais amplo está no desempenho dos gradientes em CSS.

Porque é que o backdrop-filter não funciona

Quando o desfoque parece não fazer nada, a causa é quase sempre uma de uma lista curta.

1. 1

   Confirma que o fundo é transparente

   Um background: #fff sólido cobre por completo o fundo desfocado. Usa um valor alfa como rgb(255 255 255 / 0.15).

2. 2

   Acrescenta o prefixo do Safari

   O Safari só aceita a propriedade sem prefixo a partir da versão 18. Os iPhones mais antigos ainda precisam de -webkit-backdrop-filter.

3. 3

   Procura uma raiz de fundo acima

   Um elemento pai com filter, opacity abaixo de 1, uma máscara ou o seu próprio backdrop filter limita o que o filho consegue ver. O filho desfoca então só esse pai, o que muitas vezes parece nenhum desfoque.

4. 4

   Atenção aos filhos fixos

   Tal como o filter, um backdrop filter faz do elemento o bloco contentor de filhos fixos e de posição absoluta. Um menu fixo dentro de um cabeçalho de vidro posiciona-se em relação ao cabeçalho, não à janela.

5. 5

   Garante que há algo por trás

   O desfoque sobre uma cor lisa é invisível. Desloca o painel sobre uma imagem para confirmar que funciona.

Uma alternativa que mantém o texto legível

Os painéis translúcidos são pensados em torno do desfoque. Sem ele, um preenchimento branco a 14 por cento sobre uma fotografia carregada deixa o texto assente na própria fotografia, e o contraste desaba. Escreve primeiro a versão legível e depois melhora-a onde o navegador consegue desfocar.

/* Works everywhere: opaque enough to read on its own */
.glass {
  background: rgb(15 23 42 / 0.86);
  color: #f8fafc;
}

/* Upgrade where blur is available */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass {
    background: rgb(15 23 42 / 0.45);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
  }
}

/* Respect people who ask for less transparency, where supported */
@media (prefers-reduced-transparency: reduce) {
  .glass {
    background: rgb(15 23 42 / 0.94);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

Verifica o contraste no pior ponto por trás do painel, não na média. Um título branco sobre vidro que passa por um céu brilhante pode ficar bem abaixo das razões do contraste de cor e acessibilidade. Escurecer com brightness(0.7) costuma resolver isto com mais fiabilidade do que desfocar mais.

Quando nem precisas de desfoque

Muito vidro fosco existe só para tornar as palavras legíveis sobre um fundo carregado. Se o fundo é teu para desenhar, um mais calmo resolve o problema sem custo de renderização. Um gradiente suave e de baixo contraste por trás de um herói não precisa de painel; vê os fundos de herói para sites e os fundos desfocados, onde o desfoque é incorporado na imagem uma vez em vez de calculado a cada fotograma.

Esta segunda abordagem é a que o Gradiently usa para a legibilidade: um Mark sabe onde estão as palavras e move a sua região mais calma e de melhor contraste para trás delas, por isso nunca precisas de uma caixa ou de um desfoque para salvar um título.