Gerador de backdrop-filter CSS
Configurações de filtro de pano de fundo
Visualização ao vivo
O que é backdrop-filter CSS?
O backdrop-filter CSS aplica efeitos visuais ao conteúdo por trás de um elemento, não ao elemento em si. É comumente usado para cartões de glassmorphism, sobreposições foscas, cabeçalhos fixos e diálogos translúcidos.
Este gerador ajuda você a criar valores de filtro de pano de fundo rapidamente, visualizá-los ao vivo e copiar CSS pronto para produção, incluindo a versão prefixada pelo WebKit para melhor suporte do navegador.
Como usar este gerador
- Ajuste desfoque, brilho, contraste, saturação e outros controles.
- Assista à atualização do painel de vidro na visualização ao vivo.
- Copie o valor do filtro de pano de fundo ou a regra CSS completa.
- Cole-o em sua folha de estilo e combine-o com um fundo semitransparente.
Dicas
- Os filtros de fundo funcionam melhor com fundos semitransparentes, como rgba(255.255.255.0,15).
- Valores de desfoque mais altos criam um efeito de vidro fosco mais suave.
- A saturação e o brilho podem tornar o fundo desfocado mais vívido.
- Adicione uma borda clara e sombra para um estilo de glassmorphism mais realista.
Verificações de backdrop-filter antes de aplicar efeitos
Backdrop filters processam o conteúdo posterior; stacking, transparência, suporte e custo determinam o resultado real.
Mantenha um fundo transparente
Use fundo translúcido e verifique as camadas posteriores; preenchimento opaco esconde o resultado do filtro.
Teste stacking contexts
Revise z-index, transforms, isolation, overflow, elementos fixed e filtros aninhados que mudam a composição.
Ofereça um fallback
Escolha fallback sólido ou translúcido que preserve contraste e hierarquia quando backdrop-filter não funcionar.
Meça o desempenho
Teste scroll e animação em celulares e reduza grandes regiões filtradas quando a fluidez cair.
Ferramentas relacionadas
Você também pode achar essas ferramentas úteis.