Atributo backdrop-filter CSS

Definição e uso

backdrop-filter O atributo é usado para aplicar efeitos gráficos à área por trás do elemento.

Dica:Para ver o efeito, o elemento ou seu fundo deve ser pelo menos parcialmente transparente.

Exemplo

Adiciona efeitos gráficos à área por trás do elemento:

div.transbox {
  background-color: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

Experimente você mesmo

Sintaxe CSS

backdrop-filter: none|filter|initial|inherit;

Valor do atributo

Valor Descrição
none Valor padrão. Não aplica nenhum filtro ao fundo.
filter

Lista de funções de filtro separadas por espaço, por exemplo:

  • blur()
  • brightness()
  • contrast()
  • drop-shadow()
  • grayscale()
  • hue-rotate()
  • invert()
  • opacity()
  • sepia()
  • saturate()

ou aponte para a URL do filtro SVG.

initial Defina esse atributo como seu valor padrão. Veja initial.
inherit Herda esse atributo do elemento pai. Veja inherit.

Detalhes técnicos

Valor padrão: none
Herança: Não
Produção de animação: Suporte. Veja:Atributos relacionados a animação.
Versão: CSS3
Sintaxe JavaScript: object.style.backdropFilter="grayscale(100%)"

Suporte do navegador

Os números na tabela indicam a primeira versão do navegador que suporta completamente o atributo.

Números com prefixo -webkit- indicam a primeira versão que suporta esse prefixo.

Chrome Edge Firefox Safari Opera
76 79 103 9 -webkit- 63

Páginas relacionadas

Tutorial:Imagens CSS

Referência:Atributo filter do CSS

Referência:Atributo HTML DOM filter