Crie planos de fundo no estilo do SO com filtro de pano de fundo

Desfoque e mudança de cor atrás de um elemento.

Adam Argyle

Joe Medley

Translucidez, desfoque e outros efeitos são maneiras úteis de criar profundidade e manter o contexto do conteúdo de segundo plano. Eles oferecem suporte a uma série de casos de uso, como vidro fosco, sobreposições de vídeo, cabeçalhos de navegação translúcidos, censura inadequada de imagens, carregamento de imagens e assim por diante. Você pode reconhecer esses efeitos de dois sistemas operacionais conhecidos: Windows 10 e iOS.

Exemplo de efeito de vidro fosco. Origem.

Historicamente, essas técnicas eram difíceis de implementar na Web, exigindo hacks ou soluções alternativas menos que perfeitos. Nos últimos anos, o Safari e o Edge ofereceram esses recursos com a propriedade background-filter (e, como alternativa, a -webkit-backdrop-filter), que combina dinamicamente as cores de primeiro e segundo plano com base nas funções de filtro. Agora o Chrome oferece suporte a background-filter, a partir da versão 76.

Uma demonstração das funções de filtro para backdrop-filter. Teste o exemplo no CodePen.

Suporte ao navegador

Compatibilidade com navegadores

• 76
• 79
• 103
• 18

Origem

Por motivos de desempenho, use uma imagem em vez de um polyfill quando não houver suporte para backdrop-filter. O exemplo abaixo mostra isso.

@supports (backdrop-filter: none) {
    .background {
        backdrop-filter: blur(10px);
    }
}

@supports not (backdrop-filter: none) {
  .background {
    background-image: blurred-hero.png;
  }
}

Noções básicas

• A propriedade backdrop-filter aplica um ou mais filtros a um elemento, mudando a aparência do que estiver por trás dele.
• O elemento de sobreposição precisa ser pelo menos parcialmente transparente.
• O elemento sobreposto receberá um novo contexto de empilhamento.

Cuidado: backdrop-filter pode prejudicar o desempenho. Teste antes da implantação.

O CSS backdrop-filter aplica um ou mais efeitos a um elemento translúcido ou transparente. Para entender isso, considere as imagens abaixo.

Sem transparência em primeiro plano

.frosty-glass-pane {
  backdrop-filter: blur(2px);
}

Transparência do 1º plano

.frosty-glass-pane {
  opacity: .9;
  backdrop-filter: blur(2px);
}

A imagem à esquerda mostra como elementos sobrepostos seriam renderizados se backdrop-filter não fosse usado ou suportado. A imagem à direita aplica um efeito de desfoque usando backdrop-filter. Ele usa opacity, além de backdrop-filter. Sem a opacity, não há nada para aplicar o desfoque. É quase óbvio que, se opacity for definido como 1 (totalmente opaco), não haverá efeito no segundo plano.

A propriedade backdrop-filter é como filtros de CSS, porque todas as suas funções de filtro favoritas são compatíveis: blur(), brightness(), contrast(), opacity(), drop-shadow() e assim por diante. Ele também oferece suporte à função url() se você quiser usar uma imagem externa como filtro, bem como às palavras-chave none, inherit, initial e unset. Há explicações para tudo isso no MDN, incluindo descrições de sintaxe, filtros e valores.

Quando backdrop-filter não está definido como none, o navegador cria um novo contexto de empilhamento. Um bloco que o contém também pode ser criado, mas somente se o elemento tiver descendentes de posição absolutos e fixos.

Você pode combinar filtros para criar efeitos sofisticados e inteligentes ou usar apenas um filtro para efeitos mais sutis ou precisos. Você pode até combinar esses recursos com filtros SVG.

Exemplos

As técnicas e estilos de design que antes eram reservados aos sistemas operacionais agora têm bom desempenho e podem ser alcançados com uma única declaração CSS. Vejamos alguns exemplos.

Filtro único

No exemplo a seguir, o efeito fosco é alcançado combinando cor e desfoque. O desfoque é fornecido por backdrop-filter, enquanto a cor vem da cor de plano de fundo semitransparente do elemento.

.blur-behind-me {
  background-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(.5rem);
}

Teste este exemplo no CodePen.

Vários filtros

Às vezes, você vai precisar de vários filtros para conseguir o efeito desejado. Para fazer isso, forneça uma lista de filtros separados por um espaço. Exemplo:

.brighten-saturate-and-blur-behind-me {
  backdrop-filter: brightness(150%) saturate(150%) blur(1rem);
}

No exemplo a seguir, cada um dos quatro painéis tem uma combinação diferente de filtros do pano de fundo, enquanto o mesmo conjunto de formas é animado atrás deles.

Confira este exemplo no CodePen.

Sobreposições

Este exemplo mostra como desfocar um plano de fundo semitransparente para tornar o texto legível e misturar seu estilo com o plano de fundo de uma página.

.modal {
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.5);
}

Teste este exemplo por conta própria.

Contraste do texto em planos de fundo dinâmicos

Conforme mencionado anteriormente, backdrop-filter permite efeitos de desempenho que seriam difíceis ou impossíveis na Web. Um exemplo disso é mudar um plano de fundo em resposta a uma animação. Neste exemplo, backdrop-filter mantém o alto contraste entre o texto e o plano de fundo, apesar do que está acontecendo por trás do texto. Ele começa com a cor de plano de fundo padrão darkslategray e usa backdrop-filter para inverter as cores após a transformação.

.container::before {
  z-index: 1;
  background-color: darkslategray;
  filter: invert(1);
}

.container::after {
    backdrop-filter: invert(1);
  z-index: 3;
}

Confira este exemplo de Chen Hui Jing no Codrops.

Conclusão

Mais de 560 pessoas deram pontos positivos ao bug do Chromium nos últimos anos, marcando claramente esse recurso do CSS como um recurso há muito esperado. O lançamento do backdrop-filter na versão 76 do Chrome aproxima a Web de uma apresentação de interface semelhante a um SO.

Outros recursos

• Especificação
• Status da plataforma do Chrome
• MDN
• background-filter no CSS Tricks (em inglês)
• Exemplos no Codepen