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

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

Adam argyle
Joe medley
Joe Medley
GitHub
Translucidez, desfoque e outros efeitos são maneiras úteis de criar profundidade, mantendo o contexto do conteúdo de fundo. Elas oferecem suporte a diversos casos de uso, como vidro fosco, sobreposições de vídeo, cabeçalhos de navegação translúcidos, censura de imagens inadequadas, 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.
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 perfeitas. Nos últimos anos, o Safari e o Edge forneciam esses recursos por meio da propriedade background-filter (e, alternativamente, da propriedade -webkit-backdrop-filter), que combina dinamicamente as cores do primeiro e segundo planos com base nas funções de filtro. A partir da versão 76, o Chrome é compatível com background-filter.

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

Suporte ao navegador

Compatibilidade com navegadores

  • 76
  • 17
  • 103
  • 9

Origem

Por motivos de desempenho, use uma imagem em vez de um polyfill quando o método backdrop-filter não for compatível. 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 está por trás dele.
  • O elemento sobreposto precisa ser pelo menos parcialmente transparente.
  • O elemento de sobreposição receberá um novo contexto de empilhamento.

A backdrop-filter CSS 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
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, o que permite que o círculo seja visto através dele. 
.frosty-glass-pane {
  opacity: .9;
  backdrop-filter: blur(2px);
}

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

A propriedade backdrop-filter é semelhante aos filtros CSS, porque 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 oferece suporte à 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 como algo diferente de none, o navegador cria um novo contexto de empilhamento. Um bloco contendo também pode ser criado, mas somente se o elemento tiver descendentes absolutos e fixos de posição.

Você pode combinar filtros para ter efeitos avançados e inteligentes ou usar apenas um filtro para efeitos mais sutis ou precisos. Você pode até combiná-los com filtros do SVG.

Exemplos

As técnicas e estilos de design anteriormente reservados para 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 pelo método 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ê precisará de vários filtros para conseguir o efeito desejado. Para 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 enquanto combina 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.

Contraste do texto em planos de fundo dinâmicos

Como mencionado anteriormente, a backdrop-filter permite efeitos de alta performance que seriam difíceis ou impossíveis na Web. Um exemplo disso é mudar o 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á por trás do texto. Ela 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;
}
Teste este exemplo de Chen Hui Jing no Codrops.

Conclusão

Mais de 560 pessoas votaram a favor do bug do Chromium nos últimos anos, marcando isso claramente como um recurso de CSS muito esperado. Com o lançamento do Chrome na versão 76 do backdrop-filter, a Web está um passo mais perto de apresentar a interface verdadeiramente semelhante ao SO.

Outros recursos