Gerador CSS de glassmorphism

O que é Gerador de glassmorphism?

Cria o efeito de vidro fosco (glassmorphism): um painel translúcido e colorido que desfoca e satura o que está atrás dele, com uma borda clara e uma sombra suave opcionais. A prévia coloca o card sobre fundos coloridos para você avaliar o efeito.

Como usar Gerador de glassmorphism

1. Escolha uma predefinição: Fosco, Vidro escuro, Colorido ou Sutil.
2. Ajuste o desfoque e a saturação do fundo.
3. Escolha a cor e a opacidade da tonalidade, a opacidade da borda e o raio.
4. Ative ou desative a sombra e experimente fundos diferentes nas configurações da prévia.
5. Copie o código CSS.

Exemplo

Frosted preset (blur 10px, saturation 180%, white at 0.25, border 0.3, radius 16px, shadow on)

background: rgba(255, 255, 255, 0.25);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
-webkit-backdrop-filter: blur(10px) saturate(180%);
backdrop-filter: blur(10px) saturate(180%);

Quando usar Gerador de glassmorphism

Use-o para cards, barras de navegação e modais colocados sobre imagens ou gradientes coloridos. O efeito só aparece se houver algo visível atrás do elemento; sobre uma cor chapada, parece apenas uma caixa translúcida. Confira o contraste do texto, porque o fundo atrás do vidro muda.

Como funciona Gerador de glassmorphism

O fundo do painel é a cor de tonalidade na opacidade escolhida (rgba()), e a borda usa a mesma cor na opacidade da borda. O desfoque e a saturação vão em backdrop-filter: blur(px) saturate(%); saturate(100%) é omitido porque não muda nada. A declaração é escrita duas vezes, primeiro com o prefixo -webkit- de que o Safari ainda precisa, depois sem prefixo. Se o desfoque for 0 e a saturação 100%, nenhum backdrop-filter é escrito.

Casos de Uso Comuns

• ✓ Barras de navegação foscas sobre imagens de destaque
• ✓ Cards de vidro sobre fundos com gradiente mesh
• ✓ Diálogos modais que mantêm o contexto visível
• ✓ Widgets de música ou de previsão do tempo
• ✓ Sobreposições de vidro escuro para controles de vídeo

Perguntas Frequentes

Explore mais categorias