Gerador de backdrop-filter CSS
Configurações de filtro de pano de fundo
Core
Color
Extra
Visualização ao vivo
Glass Panel
Backdrop preview
This panel blurs and filters the colorful content behind it.
Blur
Glass
Depth
Frost
Estado
Inativo
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.
Ferramentas relacionadas
Você também pode achar essas ferramentas úteis.
Gerador de filtro CSS
Gere e analise valores de filtro CSS com visualização ao vivo para desfoque, brilho, contraste, escala de cinza, rotação de matiz, inversão, opacidade, saturação e sépia.
Utilitários Diversos
›
Gerador de animação CSS
Gere abreviações de animação CSS, quadros-chave e CSS pronto para uso com visualização ao vivo.
Utilitários Diversos
›
Gerador de gradiente CSS
Gere, analise e visualize gradientes lineares e radiais CSS online. Gerador de gradiente gratuito para desenvolvedores e designers.
Utilitários Diversos
›
Conversor de cores
Converta cores HEX, RGB, RGBA e HSL instantaneamente em seu navegador.
Utilitários Diversos
›
Perguntas frequentes
Qual é a diferença entre filtro e filtro de fundo?
O filtro afeta o próprio elemento, enquanto o filtro de fundo afeta o conteúdo visível atrás do elemento.
Por que meu filtro de pano de fundo não está visível?
O elemento geralmente precisa de um fundo transparente ou semitransparente para que o conteúdo por trás dele possa ser exibido.
Devo incluir -webkit-backdrop-filter?
Sim, adicionar a versão prefixada melhora a compatibilidade em navegadores baseados em WebKit.
O filtro de fundo é bom para glassmorphism?
Sim, é uma das principais propriedades CSS usadas para criar efeitos de UI de vidro fosco e glassmorphism.