Propriedade Backdrop Filter
Última atualização: 2026-09-13
backdrop-filter Propriedade Backdrop Filter
A propriedade backdrop-filter aplica efeitos de filtro (como blur ou brightness) à área atrás de um elemento e é a forma padrão de construir efeitos de vidro fosco. Diferente de filter, ela afeta o conteúdo abaixo do elemento em vez do próprio elemento. O suporte nos navegadores modernos é bom, mas o fundo do elemento precisa ser pelo menos parcialmente transparente para que o efeito seja visível.
| Categoria | |
|---|---|
| Valor Inicial | none |
| Herdado | Não |
| Aplica-se A | all |
| Tipo de Animação | filter |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
backdrop-filter: none | <filter-function>;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
none | Palavra-chave | Sem backdrop filter |
<filter-function> | Tipo | Efeito de desfoque/filtro de fundo |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| backdrop-filter | ✓ v79 | ✓ v79 | ✓ v103 | ✓ v9 | ✓ v66 |
| Suportado em todos os principais navegadores | |||||
Dica： O backdrop-filter precisa de um fundo de elemento transparente ou semitransparente para que o conteúdo filtrado atrás dele apareça.
Importante： Diferença de filter: filter afeta o próprio elemento, enquanto backdrop-filter afeta o conteúdo atrás do elemento.
❓ Perguntas Frequentes
QQual é a diferença entre backdrop-filter e filter?
Afilter se aplica ao próprio elemento e ao resultado renderizado de seus filhos. backdrop-filter se aplica ao conteúdo que "transparece" atrás do elemento — ele filtra a camada de fundo sem tocar no próprio texto e conteúdo do elemento. O uso típico é uma barra de navegação de vidro fosco com backdrop-filter: blur(10px), que precisa de um fundo semitransparente para ser visível. Podem ser combinados, e ambos criam um contexto de empilhamento.
QQual é o suporte de navegadores para backdrop-filter?
ANavegadores modernos oferecem amplo suporte: Chrome 76+, Edge 76+, Firefox 103+ (ativado por padrão) e Safari 9+ (com o prefixo -webkit-). Escreva tanto -webkit-backdrop-filter quanto backdrop-filter. O IE não tem suporte, e o elemento precisa de um fundo semitransparente para o efeito aparecer.
QPor que meu efeito de vidro fosco não funciona?
ACausas comuns: o fundo do elemento é totalmente opaco (por exemplo, background: #fff), cobrindo o conteúdo atrás dele; falta o prefixo -webkit-, então o Safari mais antigo o ignora; o navegador não oferece suporte (IE); ou simplesmente não há nada atrás do elemento para desfocar. A configuração correta é um fundo semitransparente como rgba(255,255,255,0.3) com conteúdo real atrás.
QQuais funções de filtro o backdrop-filter suporta?
AO mesmo conjunto de filter: blur(), brightness(), contrast(), grayscale(), sepia(), hue-rotate(), invert(), saturate(), opacity() e drop-shadow(), que podem ser combinados com espaços. Vidro fosco com um aumento de saturação é uma combinação comum em barras de navegação.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
