Pular para o conteúdo

Gerador Glassmorphism CSS

Crie efeitos CSS Glassmorphism visualmente. Ajuste desfoque, opacidade, cor de fundo e sombra. Copie o código CSS. Grátis, 100% no seu navegador.

Visualização

Glassmorphism
10px
20%
30%

Saída CSS

 

O que é Glassmorphism?

Glassmorphism é uma tendência de design que combina fundos transparentes e desfocados com bordas sutis e sombras para criar um efeito de vidro fosco. É implementado com backdrop-filter: blur() e fundos semitransparentes.

Compatibilidade de navegadores

backdrop-filter é compatível com todos os navegadores modernos. Para navegadores mais antigos, forneça um fallback com fundo semitransparente sem desfoque. Use o prefixo -webkit-backdrop-filter para máxima compatibilidade.

Privacidade

Todo o processamento é executado 100% no seu navegador. Nenhum dado é enviado a servidores.