Gerador de glassmorphism (vidro fosco)
Desenhe cards e painéis de vidro fosco vendo o resultado na hora sobre fundos diferentes. O CSS gerado inclui o prefixo -webkit- que o Safari ainda exige.
Processado 100% no seu navegador
O fundo fica desfocado atrás deste card. Ajuste os controles e copie o CSS.
Ctrl + Enter executarCtrl + C copiar resultado
Como usar
- 1Escolha a cor do vidro (branco para fundos escuros, preto para claros).
- 2Ajuste transparência, desfoque e saturação até chegar ao efeito desejado.
- 3Adicione borda e sombra para destacar o vidro do fundo e teste outros fundos.
- 4Copie o CSS ou compartilhe um link com as configurações.
Casos de uso
- Cards, modais e barras de navegação modernas.
- Painéis sobre fotos ou vídeos sem perder legibilidade.
- Interfaces inspiradas no macOS, iOS ou Windows 11.
- Protótipos rápidos para apresentar a clientes.
Perguntas frequentes
O que é glassmorphism?
Um estilo visual que imita vidro fosco: um painel semitransparente que desfoca o que está atrás usando a propriedade CSS backdrop-filter, geralmente com uma borda fina e uma sombra suave.
Funciona em todos os navegadores?
backdrop-filter funciona nas versões atuais do Chrome, Edge, Firefox e Safari. O Safari ainda exige o prefixo -webkit-backdrop-filter, que já está no CSS.
Por que não vejo o efeito no meu site?
O desfoque só aparece quando há conteúdo detalhado ou colorido atrás do elemento (uma imagem, um gradiente ou formas). Sobre um fundo liso, o vidro parece apenas uma cor semitransparente.
Afeta o desempenho?
backdrop-filter usa a GPU. Aplique-o em poucos elementos e evite desfoques muito fortes em áreas enormes, principalmente em celulares de entrada.