Gerador de Glassmorphism CSS
Crie efeitos de UI deslumbrantes tipo vidro com backdrop-filter e transparência.
① Ajuste blur e opacidade ② Escolha cor e borda ③ Copie o CSS
Glassmorphism
backdrop-filter: blur(12px)
Presets:
12px
18%
180%
30%
16px
Código CSS
.glass {
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(12px) saturate(180%);
-webkit-backdrop-filter: blur(12px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.30);
border-radius: 16px;
}O que é Glassmorphism?
O glassmorphism é uma tendência de design UI que cria uma aparência de vidro fosco usando CSS backdrop-filter, fundos semi-transparentes e bordas sutis. Propriedades chave: backdrop-filter: blur(12px) saturate(180%) desfoca o conteúdo atrás. background: rgba(255,255,255,0.18) define o preenchimento translúcido. border: 1px solid rgba(255,255,255,0.3) adiciona a borda de vidro. Safari requer -webkit-backdrop-filter. Inclua sempre um fallback com @supports para navegadores mais antigos.
Perguntas Frequentes
O glassmorphism é um estilo UI que simula vidro fosco usando CSS backdrop-filter com desfoque, fundos coloridos semi-transparentes e bordas translúcidas finas.
As propriedades principais: backdrop-filter: blur(10px), background: rgba(255,255,255,0.15), border: 1px solid rgba(255,255,255,0.3).
Suportado no Chrome, Firefox 103+, Edge e Safari (com prefixo -webkit-). Inclua sempre ambas as versões para compatibilidade máxima.
Use @supports: @supports not (backdrop-filter: blur(1px)) { .glass { background: rgba(255,255,255,0.9); } }
O glassmorphism requer conteúdo ATRÁS do elemento de vidro. Coloque o elemento sobre uma imagem ou gradiente para ver o efeito.
Valores entre 8px e 20px criam a aparência de vidro mais natural. 10–16px é o ponto ideal comum.
Adicione box-shadow: box-shadow: 0 8px 32px rgba(0,0,0,0.15). Combine sombras internas (inset) com externas para um efeito convincente de painel de vidro.