backdrop-filter para Efeito de Vidro Fosco
Crie efeitos de desfoque de vidro fosco em elementos sobrepostos a outros conteúdos usando backdrop-filter.
backdrop-filter para Efeito de Vidro Fosco é uma aula grátis de CSS Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de CSS Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de CSS Academy inclui 4 aulas no total.
O que é backdrop-filter?
backdrop-filter aplica efeitos gráficos à área atrás de um elemento, e não ao próprio elemento. O elemento precisa ter alguma transparência (um plano de fundo com alfa menor que 1 ou nenhum plano de fundo) para revelar o plano de fundo filtrado.
Efeito de vidro fosco
O padrão clássico de vidro fosco:
<div class="bg-wrapper">
<div class="glass-card">Frosted Glass Card</div>
</div>
Prefixo -webkit-backdrop-filter
Safari exige o prefixo -webkit-backdrop-filter. Sempre o inclua junto à propriedade padrão para garantir compatibilidade entre navegadores.
Funções de filtro disponíveis
backdrop-filter aceita as mesmas funções que filter: blur(), brightness(), contrast(), grayscale(), saturate(), hue-rotate(), sepia(), drop-shadow().
<div class="bg-wrapper">
<div class="modal-overlay"></div>
</div>
Vidro fosco escuro
Uma variante escura para sobreposições e janelas modais:
<div class="bg-wrapper">
<div class="dark-glass">Dark Frosted Panel</div>
</div>
Requisito de contexto de empilhamento
backdrop-filter cria um contexto de empilhamento. O elemento precisa ser composto acima do plano de fundo — isso significa que ele precisa estar acima de outro conteúdo na ordem de empilhamento (não necessariamente por meio de z-index, mas pela ordem de pintura).
Desempenho de backdrop-filter
Um backdrop-filter: blur() intenso é caro — ele força o navegador a renderizar o plano de fundo em uma passagem separada. Para obter bom desempenho em dispositivos móveis, use valores de desfoque de 20px ou menos. Evite-o em conteúdos que sejam repintados com frequência.
Janela modal com sobreposição de vidro fosco
Uma janela de diálogo modal com sobreposição de vidro fosco:
<div class="modal-backdrop">
<div class="modal">Modal Content</div>
</div>
Navegação fixa com vidro
Uma barra de navegação fixa com efeito de vidro fosco:
<div class="bg-wrapper">
<nav class="navbar">Sticky Nav</nav>
</div>
Compatibilidade com navegadores
backdrop-filter é compatível com Chrome 76+, Firefox 103+ e Safari 9+ (webkit). Sempre inclua o prefixo -webkit-. Consulte caniuse.com para obter os dados atuais e forneça uma alternativa opaca para navegadores sem suporte.
Alternativa opaca
Forneça um plano de fundo opaco como alternativa para navegadores que não oferecem suporte a backdrop-filter:
<div class="bg-wrapper">
<div class="glass">Fallback-aware glass panel</div>
</div>
Verificação rápida
O que um elemento precisa ter para que backdrop-filter fique visível?
Recapitulação
backdrop-filter aplica efeitos de filtro ao que está atrás de um elemento. O elemento precisa de transparência para que o efeito seja visível. O vidro fosco clássico usa blur() + saturate(). Sempre inclua -webkit-backdrop-filter para o Safari. Forneça uma alternativa opaca usando @supports.
Perguntas Frequentes
A aula “backdrop-filter para Efeito de Vidro Fosco” é grátis?
Sim — o texto completo de “backdrop-filter para Efeito de Vidro Fosco” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de CSS Academy, atualize para CoddyKit PRO. O curso de CSS Academy inclui 4 aulas no total.
O que vou aprender em “backdrop-filter para Efeito de Vidro Fosco”?
Crie efeitos de desfoque de vidro fosco em elementos sobrepostos a outros conteúdos usando backdrop-filter. Você pratica CSS Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar CSS Academy?
Nenhuma experiência prévia é necessária. CSS Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.
Quanto tempo leva a aula “backdrop-filter para Efeito de Vidro Fosco”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de CSS Academy?
Sim. Cada aula de CSS Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- filter: blur brightness contrast grayscale
- backdrop-filter para Efeito de Vidro Fosco
- mix-blend-mode para Mesclagem de Camadas
- Propriedade isolation