Gerador de glassmorphism – CSS de efeito vidro fosco
Crie cards e painéis de vidro fosco com prévia ao vivo. Ajuste desfoque, transparência, saturação, borda e arredondamento sobre um fundo colorido e copie um CSS pronto para produção.
Mova os controles de desfoque, transparência, saturação, opacidade da borda e arredondamento e escolha a cor do vidro. O card se atualiza ao vivo. Copie o CSS: ele tem fundo semitransparente, backdrop-filter com prefixo -webkit- para o Safari, borda sutil e sombra suave opcional.
Como usar: Gerador de glassmorphism
- Escolha um fundo para a prévia.
- Ajuste o desfoque e a transparência.
- Ajuste a saturação, a borda e o arredondamento.
- Escolha a cor do vidro e ative ou não a sombra.
- Copie o CSS e aplique no seu card ou painel.
O que é glassmorphism?
Glassmorphism é um estilo de design que imita vidro fosco: uma superfície semitransparente que desfoca o que está atrás, muitas vezes com uma borda clara fina e uma sombra suave. Ficou popular com o macOS Big Sur e o Windows 11 e funciona melhor sobre fundos coloridos e variados.
O CSS por trás
O efeito vem do `backdrop-filter`, que desfoca o conteúdo atrás do elemento. Um fundo semitransparente deixa esse conteúdo borrado aparecer.
| Propriedade | Função | Valor típico |
|---|---|---|
| background | Superfície tingida e translúcida | rgba(255, 255, 255, 0.15–0.3) |
| backdrop-filter | Desfoca o que está atrás | blur(8–16px) saturate(150–180%) |
| border | Brilho da borda | 1px solid rgba(255, 255, 255, 0.3) |
| border-radius | Cantos suaves | 12–24px |
| box-shadow | Eleva o painel | 0 8px 32px rgba(0, 0, 0, 0.18) |
O Safari ainda precisa de `-webkit-backdrop-filter`, por isso o gerador inclui as duas linhas.
Legibilidade e acessibilidade
Painéis de vidro mudam conforme o que está atrás, então o contraste do texto pode variar dentro do card. Use mais desfoque, um fundo menos transparente ou um tom mais escuro atrás de textos longos e confira com o Verificador de contraste de cores. Respeite quem ativa transparência reduzida no sistema: `@media (prefers-reduced-transparency: reduce)` permite trocar por um fundo sólido.
Desempenho
O desfoque é feito pela placa de vídeo e é rápido para poucos elementos, mas muitas camadas grandes desfocadas, principalmente animadas, podem deixar celulares antigos lentos. Use vidro em superfícies-chave, como barras de navegação, modais e cards de destaque.
Onde funciona melhor
Barras de navegação sobre imagens, cards de login sobre gradientes e painéis de player de música são usos ideais. Sobre um fundo branco liso não há nada para desfocar e o efeito some.
Combine com outros efeitos
Crie o fundo colorido com o Gerador de gradiente CSS, ajuste sombras com o Gerador de box-shadow CSS e modele os cantos com o Gerador de border-radius. O código é gerado no navegador.
Você também pode gostar destas ferramentas grátis: Formatador JSON, Gerador de senha e Testador de regex.
Perguntas frequentes
Como faço efeito de vidro no CSS?
Combine um fundo semitransparente com backdrop-filter: blur(), por exemplo background: rgba(255,255,255,.2); backdrop-filter: blur(12px).
Por que meu backdrop-filter não funciona?
O elemento precisa de fundo semitransparente e algo colorido atrás. O Safari também precisa de -webkit-backdrop-filter.
Glassmorphism funciona em todos os navegadores?
Sim, todos os navegadores atuais suportam backdrop-filter. Os antigos mostram o fundo transparente sem desfoque.
Glassmorphism é acessível?
Pode ser, se o texto mantiver contraste suficiente. Use mais desfoque ou tom e teste o contraste.
O backdrop-filter deixa a página lenta?
Poucos elementos não. Muitas camadas grandes ou animadas podem afetar aparelhos antigos.
Última atualização: