Gerador de Glassmorphism

Crie efeitos de vidro fosco com blur, opacidade e bordas personalizáveis. Prévia ao vivo sobre um fundo vibrante.

Como funciona: Ajuste o desfoque, opacidade e configuração de bordas para criar seu efeito de vidro. A prévia mostra o resultado sobre um fundo colorido. Copie o CSS quando estiver pronto.

Glass Card
This is a glassmorphism effect with customizable blur, opacity, and border properties.
Fundo
#ffffff
15%
12px
180%
Borda
1px
20%
16px
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(12px) saturate(180%);
-webkit-backdrop-filter: blur(12px) saturate(180%);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.20);

O que é Glassmorphism?

Glassmorphism é uma tendência de design UI que cria um efeito de vidro fosco usando a propriedade CSS backdrop-filter. Os elementos aparecem translúcidos com o fundo desfocado visível através deles, criando profundidade e hierarquia visual. Popularizado pelos designs do macOS e iOS da Apple, combina transparência, desfoque e bordas sutis.

Como Criar Efeitos de Glassmorphism

As propriedades principais são backdrop-filter: blur() para o efeito fosco, um background-color semitransparente para a tonalidade, e uma borda sutil para definição das bordas. Ajuste o raio de desfoque para mais ou menos transparência, e use a saturação do fundo para realçar as cores visíveis através do vidro.

Suporte de Navegadores para Glassmorphism

A propriedade backdrop-filter é suportada em todos os navegadores modernos incluindo Chrome, Firefox, Safari e Edge. Para navegadores antigos, forneça uma cor de fundo sólida como fallback. Use @supports (backdrop-filter: blur(1px)) para aplicar o efeito de vidro condicionalmente.

Dicas de Design para Glassmorphism

  • Use sobre fundos vibrantes ou degradês para o melhor impacto visual
  • Mantenha o blur entre 8-20px para texto legível atrás do vidro
  • Adicione uma borda sutil branca ou clara para definição
  • Garanta que o contraste do texto atenda as diretrizes de acessibilidade WCAG
  • Sobreponha múltiplos painéis de vidro com diferentes opacidades para criar profundidade
  • Combine com um box-shadow sutil para maior elevação