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

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.

Suporte ao navegador

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 de tudo o que está por trás dele.
• O elemento de sobreposição precisa ser pelo menos parcialmente transparente.
• O elemento de sobreposição vai receber um novo contexto de empilhamento.

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 os elementos sobrepostos seriam renderizados se backdrop-filter não fosse usado ou não tivesse suporte. A imagem à direita aplica um efeito de desfoque usando backdrop-filter. Ela usa opacity, além de backdrop-filter. Sem opacity, não haveria 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 é semelhante aos filtros do CSS, porque oferece suporte a todas as suas funções de filtro favoritas: 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 é definido como qualquer coisa diferente de none, o navegador cria um novo contexto de empilhamento. Um bloco contendo também pode ser criado, mas apenas se o elemento tiver descendentes de posição absoluta e fixa.

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 abaixo, 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);
}

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.

Sobreposições

Este exemplo mostra como desfocar um plano de fundo semitransparente para tornar o texto legível e, ao mesmo tempo, se misturar ao plano de fundo da página.

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

Contraste do texto em planos de fundo dinâmicos

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

Conclusão

Mais de 560 pessoas deram votos positivos para o bug do Chromium nos últimos anos, marcando claramente esse recurso do CSS como um recurso há 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 IU realmente semelhante a um sistema operacional.

Outros recursos

• Especificação
• Status da plataforma do Chrome
• MDN
• background-filter na CSS Tricks
• Exemplos no Codepen