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
Joe Medley
GitHub
Translucência, desfoque e outros efeitos são maneiras úteis de criar profundidade, mantendo o contexto do conteúdo de fundo. 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 imagem, carregamento de imagens e assim por diante. Você pode reconhecer esses efeitos de dois sistemas operacionais conhecidos: Windows 10 e iOS.

Um exemplo de efeito de vidro fosco.
Um exemplo de efeito de vidro fosco. Origem.

Antes, essas técnicas eram difíceis de implementar na Web e exigiam hacks ou soluções alternativas menos do que perfeitas. Nos últimos anos, o Safari e o Edge forneceram esses recursos usando a propriedade background-filter (e, alternativamente, a -webkit-backdrop-filter), que mistura dinamicamente as cores de primeiro e segundo planos com base nas funções de filtro. Agora o Chrome é compatível com 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
  • 9

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;
  }
}

Princípios básicos

  • 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 de sobreposição receberá um novo contexto de empilhamento.

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

Sem transparência em primeiro plano
Um triângulo sobreposto em um círculo. O círculo não pode ser visto através do triângulo. 
.frosty-glass-pane {
  backdrop-filter: blur(2px);
}
Transparência em primeiro plano
Um triângulo sobreposto em um círculo. O triângulo é translúcido, permitindo que o círculo seja visto através dele. 
.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 compatível. A imagem à direita aplica um efeito de desfoque usando backdrop-filter. Ela 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, em que todas as suas funções de filtro favoritas são compatíveis: blur(), brightness(), contrast(), opacity(), drop-shadow() e assim por diante. Ela também é compatível com a função url() se você quiser usar uma imagem externa como filtro, bem como as 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 está definido para algo diferente de 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 avançados e inteligentes ou usar apenas um filtro para criar efeitos mais sutis ou precisos. É possível até combiná-los com filtros do SVG.

Exemplos

Estilos e técnicas 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, serão necessários vários filtros para obter 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 de pano de fundo, enquanto o mesmo conjunto de formas é animado atrás deles.

Teste 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, a backdrop-filter mantém o alto contraste entre o texto e o segundo plano, apesar do que acontece 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;
}
Veja este exemplo de Chen Hui Jing em Codrops.

Conclusão

Mais de 560 de vocês apoiaram o bug do Chromium nos últimos anos, marcando claramente como um recurso do CSS muito esperado. O lançamento do backdrop-filter no Chrome na versão 76 deixa a Web um passo mais perto de uma apresentação de interface semelhante a um sistema operacional.

Outros recursos