Processamento no seu navegador — os arquivos nunca saem do seu dispositivo.
Grátis, sem cadastro, conta ou limites de uso.
Funciona em qualquer navegador moderno, inclusive no celular.
About this tool
Gerador de efeitos Glassmorphism CSS ajuda designers e desenvolvedores front-end a criar componentes de UI com vidro fosco moderno usando backdrop-filter do CSS, transparência de borda e sombras de profundidade.
How to use
Ajuste o raio de desfoque, a opacidade, a largura da borda e a opacidade da borda.
Teste o cartão fosco sobre gradientes de malha coloridos e fundos escuros.
Personalize a tonalidade base do cartão e o raio da borda.
Clique em Copiar CSS para copiar as regras de backdrop-filter entre navegadores.
FAQ
O CSS funciona no Safari e em navegadores moveis?
Sim! A saida inclui os prefixos de fornecedor backdrop-filter e -webkit-backdrop-filter para suporte total a Safari, iOS e Chromium.
O que é glassmorphism?
glassmorphism é uma tendência de design de UI caracterizada por desfoque de fundo, superfícies em camadas semitransparentes, bordas sutis e contraste de fundo vibrante.