Glassmorphism CSS: Como criar UI com efeito vidro
Implemente glassmorphism com backdrop-filter, transparência rgba e truques de borda. Inclui suporte a navegadores e acessibilidade.
O glassmorphism se tornou uma das tendências UI definidoras do início dos anos 2020. O efeito de vidro fosco cria uma sensação de profundidade e translucidez.
A implementação CSS requer três ingredientes: backdrop-filter para o desfoque, rgba para transparência e uma borda semi-transparente.
O que é glassmorphism
Glassmorphism é um estilo de design caracterizado por superfícies translúcidas com efeito de vidro fosco. Propriedades visuais chave: transparência de fundo (30-50% de opacidade), desfoque de fundo (8-32px), borda sutil (1-2px, branco semi-transparente).
Ferramenta gratuita Gerador de Glassmorphism Crie efeitos UI de vidro fosco com pré-visualização CSS ao vivoSintaxe backdrop-filter: blur()
backdrop-filter aplica efeitos gráficos ao conteúdo atrás de um elemento. A função blur() desfoca o fundo: backdrop-filter: blur(12px).
rgba e transparência
A superfície de vidro usa rgba() com alpha baixo: background: rgba(255, 255, 255, 0.15). O valor alpha (0.15-0.25) controla a transparência da superfície.
Ferramenta gratuita Gerador de Filtros CSS Aplique desfoque, brilho e contraste com filtros CSSBorda com rgba
Uma característica definidora do glassmorphism é a borda semi-transparente: border: 1px solid rgba(255, 255, 255, 0.3). A borda simula a luz refletindo na borda do vidro.
Suporte a navegadores e fallbacks
backdrop-filter é suportado em todos os navegadores modernos desde 2022. Use @supports (backdrop-filter: blur(1px)) para aplicar glassmorphism apenas onde for suportado.
Considerações de performance
backdrop-filter é custoso em performance. Limite o número de elementos com backdrop-filter e teste em dispositivos de baixo desempenho.
Ferramenta gratuita Gerador de Neumorphism Crie efeitos de UI suave extrudida com duplas sombras box