Backdrop filter no CSS: vidro fosco que continua rápido

Um backdrop filter no CSS aplica um efeito gráfico, em geral desfoque, ao que está atrás de um elemento. Escreva backdrop-filter: blur(12px) em um elemento com fundo parcialmente transparente e a página embaixo se suaviza, o visual de vidro fosco usado em barras de navegação, painéis e cartões. Ele é compatível com todos os navegadores atuais. O ofício está em manter a área desfocada pequena, o raio modesto e o plano B legível.

A receita básica de vidro fosco

Três coisas fazem o vidro: um preenchimento translúcido para o fundo aparecer, o desfoque em si e uma borda tênue para o painel ter forma. A maioria também acrescenta um pequeno ganho de saturação, porque desfocar tira a média das cores e as deixa mais acinzentadas do que o esperado.

.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 atrás. Numa página cinza chapada, o painel só parece opaco. Coloque-o sobre uma fotografia ou um gradiente rico, como glassmorphism explica com mais profundidade.

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

A propriedade aceita as mesmas funções de filter, e você pode encadeá-las em uma só declaração. Elas se aplicam em ordem, da esquerda para a direita, então blur() seguido de saturate() se comporta de modo 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, ele precisa ler cada pixel atrás do elemento, amostrar os vizinhos até o raio do desfoque e compor o resultado, e repete esse trabalho sempre que algo atrás do painel muda. Um cabeçalho fixo sobre uma página que rola redesenha o desfoque a cada quadro da rolagem.

O custo escala com dois números que você controla: a área do elemento e o raio. Um cabeçalho de 64 pixels desfocado a 12px é barato em quase tudo. Uma sobreposição de tela cheia desfocada a 40px sobre um vídeo pode derrubar quadros num celular intermediário. O quadro mais amplo está em desempenho de gradientes CSS.

Por 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

   Veja se o fundo é transparente

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

2. 2

   Adicione o prefixo do Safari

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

3. 3

   Procure uma raiz de backdrop acima

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

4. 4

   Cuidado com filhos fixos

   Como o filter, o backdrop filter faz do elemento o bloco contêiner de filhos com posição fixa e absoluta. Um menu fixo dentro de um cabeçalho de vidro se posiciona em relação ao cabeçalho, não à janela.

5. 5

   Garanta que haja algo atrás

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

Um plano B que mantém o texto legível

Painéis translúcidos são desenhados em torno do desfoque. Sem ele, um preenchimento branco de 14 por cento sobre uma foto agitada deixa o texto sobre a própria foto, e o contraste desaba. Escreva primeiro a versão legível e depois a melhore 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;
  }
}

Confira o contraste no pior ponto atrás do painel, não na média. Um título branco sobre um vidro que passa por um céu claro pode ficar bem abaixo das taxas de contraste de cores e acessibilidade. Escurecer com brightness(0.7) costuma resolver isso com mais segurança do que desfocar mais forte.

Quando você nem precisa de desfoque

Muito vidro fosco existe só para tornar as palavras legíveis sobre um fundo agitado. Se o fundo é seu para projetar, um mais calmo resolve o problema sem custo de renderização. Um gradiente suave e de baixo contraste atrás de um hero dispensa o painel; veja fundos de hero para sites e fundos desfocados, em que o desfoque é gravado na imagem uma vez em vez de calculado a cada quadro.

Essa segunda abordagem é como o Gradiently trata a legibilidade: um Mark sabe onde estão as palavras e leva sua região mais calma e de melhor contraste para trás delas, então você nunca precisa de caixa nem de desfoque para resgatar um título.