Gerador CSS de glassmorphism
Ajuste o desfoque, a transparência, a borda e a sombra para criar um efeito de vidro fosco (glassmorphism) e depois copie o CSS gerado. Visualização ao vivo no seu navegador, nenhum dado enviado a um servidor.
Como funciona
O glassmorphism combina três propriedades CSS: um fundo semitransparente, um desfoque de fundo (backdrop-filter: blur()) que embaça o que está atrás do elemento e uma borda fina e clara que simula um reflexo na lateral do "vidro". Ajuste os controles deslizantes para encontrar o equilíbrio entre legibilidade do texto e efeito visual e depois copie o CSS para aplicá-lo aos seus cartões, barras de navegação ou janelas modais.
O glassmorphism funciona em todos os navegadores?
A propriedade backdrop-filter é compatível com todos os navegadores modernos (Chrome, Firefox, Safari, Edge), e o código gerado inclui o prefixo -webkit-backdrop-filter para melhor compatibilidade com o Safari. Em navegadores muito antigos, o elemento continua visível, mas sem o efeito de desfoque.
Em que tipo de fundo esse efeito é mais visível?
O glassmorphism é mais visível sobre um fundo com contraste ou cor (gradiente, imagem, ilustração) colocado atrás do elemento: sobre um fundo liso e claro, o efeito de desfoque fica discreto. Sempre teste a legibilidade do texto sobre o elemento de vidro antes de usá-lo em uma interface real.
Geração e visualização 100% locais: o CSS é calculado no seu navegador a partir dos seus ajustes, sem nenhum envio de dados.