Gerador de glassmorphism CSS
Crie cartões de vidro fosco com pré-visualização.
Ajuste o desfoque, a opacidade do tingimento, o raio das bordas e a borda de um cartão glassmorphism, veja ao vivo sobre um fundo colorido e copie o CSS completo.
Cor de fundo
Vidro tingido
12px
25%
20px
50%
background: rgba(255, 255, 255, 0.25); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.50); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
Como criar glassmorphism
- Escolha uma cor de fundo atrás do cartão de vidro.
- Escolha a cor do tingimento e defina sua opacidade.
- Ajuste desfoque, opacidade da borda e raio com os controles.
- Copie o CSS gerado para o seu projeto.
Perguntas frequentes
O que é glassmorphism?
É um estilo de interface que imita vidro fosco: um painel translúcido sobre um fundo colorido, suavizado com desfoque de fundo.
Por que há duas propriedades de desfoque no CSS?
A propriedade com prefixo webkit mantém o efeito funcionando no Safari e outros navegadores que precisam dela.
backdrop-filter funciona em toda parte?
É suportado por todos os navegadores modernos. Navegadores muito antigos mostrarão um painel translúcido sem desfoque.