Gerador de Glassmorphism CSS

O que é o glassmorphism ?

O glassmorphism é uma tendência de design de interface que destaca elementos tipo vidro fosco que deixam o plano de fundo transparecer através de um efeito de desfoque. Ele usa a propriedade CSS backdrop-filter: blur(), planos de fundo semi-transparentes e bordas sutis para um resultado moderno e em camadas. É popular em interfaces de dashboard, cards e modais.

Compatibilidade dos navegadores

backdrop-filter é suportado em todos os navegadores modernos : Chrome, Edge, Safari e Firefox 103+. Para versões mais antigas do Firefox, considere uma cor de fundo sólida como fallback.

Como funciona

1. Escolha uma cor de fundo. O vidro precisa de algo atrás dele para ser visível. Escolha um fundo sólido, um gradiente ou uma foto para a área de pré-visualização, para que você possa avaliar como o desfoque vai ficar no seu layout real.
2. Defina o desfoque e a saturação. O raio de desfoque simula o espalhamento de luz do vidro fosco; a saturação puxa para a frente as cores que estão atrás do painel. A receita clássica no estilo Apple fica em torno de blur(10px) saturate(180%).
3. Ajuste a cor e a transparência do vidro. O fundo do próprio elemento precisa ser parcialmente transparente: uma cor opaca bloqueia o fundo por completo. Branco ou preto com 10-30% de alfa é o ponto de partida típico.
4. Ajuste a borda e o raio de canto. Uma borda branca fina com alfa baixo imita o realce da borda interna do vidro físico. Um border-radius em torno de 12-20px dá o visual de cartão suave que a maioria dos designs de glassmorfismo usa.
5. Copie o CSS. Cole o bloco de propriedades gerado na sua folha de estilos. Adicione a linha companheira -webkit-backdrop-filter se você precisa dar suporte a versões mais antigas do Safari.

De onde veio o termo

O visual é mais antigo que o rótulo. A Apple introduziu fundos desfocados em tempo real para os painéis de notificação e a Central de Controle com o iOS 7 em 2013, e o trouxe para o desktop com o macOS Yosemite no ano seguinte; a equipe do WebKit lançou a propriedade CSS backdrop-filter em agosto de 2015 especificamente porque, como diz o seu post de lançamento, «a linguagem de design da interface de usuário para o iOS 7 e o OS X Yosemite mudou para incorporar belos efeitos de desfoque de fundo». O anterior «Aero Glass» (2007) do Windows Vista, da Microsoft, era a mesma ideia, e a Microsoft documenta dois materiais relacionados no moderno sistema Fluent: o Acrylic (translúcido, desfocado, com uma sobreposição de ruído) e o Mica (uma variante opaca tingida pela área de trabalho, introduzida com o Windows 11). O nome único «glassmorfismo» foi cunhado pelo designer polonês Michał Malewicz, da Hype4 Academy, em novembro de 2020, em sintonia com o lançamento do macOS Big Sur; a consistência de nomenclatura, na mesma família do anterior «neumorfismo», deu aos designers um vocabulário comum para discutir a técnica.

A receita CSS

.glass-card {
  /* 1. Element background: must be partially transparent */
  background: rgba(255, 255, 255, 0.18);

  /* 2. The frosted-glass effect */
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%); /* Safari 9-16 */

  /* 3. The inner-edge highlight */
  border: 1px solid rgba(255, 255, 255, 0.3);

  /* 4. Soft corners */
  border-radius: 16px;
}

Três coisas para internalizar sobre a receita. Primeira: o fundo do próprio elemento precisa ser transparente ou parcialmente transparente; a MDN diz isso de forma simples: «O elemento ou o seu fundo precisa ser transparente ou parcialmente transparente para que o efeito seja visível». Um background-color totalmente opaco cobre a amostra desfocada, e o usuário vê um painel chapado. Segunda: o efeito precisa de algo atrás para desfocar; o glassmorfismo não funciona sobre uma página branca uniforme. Terceira: o Safari moderno aceita a propriedade sem prefixo, mas qualquer versão anterior ao Safari 17 precisa tanto do backdrop-filter quanto do gêmeo -webkit-backdrop-filter.

Todas as dez funções de filtro

O backdrop-filter é definido no W3C Filter Effects Module Level 2 e aceita as mesmas dez funções de filtro que a propriedade filter comum: blur(), brightness(), contrast(), drop-shadow(), grayscale(), hue-rotate(), invert(), opacity(), saturate() e sepia(). Elas podem ser encadeadas, e a ordem importa: são aplicadas da esquerda para a direita contra a amostra do fundo. Para o glassmorfismo, blur() mais saturate() cobre o visual canônico; todo o resto é ajuste criativo (por exemplo, brightness(105%) em fundos escuros para realçar a amostra desfocada, ou contrast(120%) para manter as relações de cor nítidas).

Suporte dos navegadores e o prefixo -webkit-

Em 2026, a propriedade é suportada em todos os navegadores evergreen. O WebKit a lançou primeiro, em 10 de agosto de 2015, com o Safari 9 / iOS 9, atrás do prefixo -webkit-backdrop-filter. O Chrome adicionou suporte sem prefixo na versão 76 (julho de 2019), o Edge seguiu com a virada para o Chromium na versão 79, e o Firefox 103 a habilitou sem flag em 26 de julho de 2022. A MDN marca a propriedade como Baseline 2024 (recém-disponível desde setembro de 2024), o que significa que os quatro motores principais agora interoperam. O suporte no mundo real fica em torno de 95% global. Para cobrir versões mais antigas do Safari (e usuários do PostCSS), inclua as declarações com e sem prefixo lado a lado, ou deixe o autoprefixer adicionar o prefixo a partir da sua configuração do Browserslist.

Uma alternativa para os navegadores que não a suportam

Use uma consulta @supports para que os navegadores sem suporte recebam uma alternativa sólida em vez de um painel transparente ilegível:

.glass-card {
  background: rgba(30, 41, 59, 0.92); /* opaque fallback */
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-card {
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
  }
}

Desempenho: quando usar (e quando não usar)

O backdrop-filter é acelerado por GPU, mas não é grátis. Cada superfície filtrada força o navegador a manter uma camada de composição separada e a reamostrar a área atrás do elemento. O rascunho do editor do W3C reconhece isso diretamente, apontando que filtros de fundo aninhados ou empilhados podem causar «passagens de renderização exponenciais», e o post de lançamento do WebKit alerta que a propriedade «força o motor a realizar mais passagens de renderização, o que terá impacto no desempenho». O resumo conciso do Web.dev se aplica: «o backdrop-filter pode prejudicar o desempenho. Teste-o antes de implantar.»

Regras práticas: mantenha os raios de desfoque abaixo de ~20px no código de produção, evite superfícies de vidro que ocupam toda a viewport (uma barra de navegação de vidro que se repinta a cada rolagem é a infratora clássica), não empilhe muitas superfícies filtradas umas sobre as outras, e evite o backdrop-filter sobre elementos <video>, em que o desfoque tem de ser recalculado a cada quadro. A Microsoft diz aos usuários do Acrylic praticamente a mesma coisa na documentação do Fluent: «Os efeitos do Acrylic são desativados automaticamente quando um dispositivo entra no modo de Economia de Bateria».

Acessibilidade: a armadilha do contraste

O glassmorfismo, por definição, reduz o contraste entre o texto e o seu fundo, porque o «fundo» sob o painel agora é o que quer que esteja atrás dele, e isso varia conforme o usuário rola ou muda o papel de parede. Os mínimos relevantes da WCAG 2.1 (4,5:1 para texto de corpo normal, 3:1 para texto grande ou em negrito) precisam ser atendidos contra o fundo de pior caso, não o médio. Orientação prática: mantenha o texto de corpo fora dos painéis de vidro e use-os principalmente para elementos de interface (cartões, cabeçalhos, modais), onde a leitura de fato acontece contra uma superfície interna mais opaca. Sempre forneça uma variante de alternativa opaca para os usuários que desligaram a transparência no nível do sistema operacional: tanto o macOS (Ajustes do Sistema → Acessibilidade → Tela → Reduzir transparência) quanto o Windows (Configurações → Personalização → Cores → Efeitos de transparência) expõem a opção, e o CSS pode detectá-la:

@media (prefers-reduced-transparency: reduce) {
  .glass-card {
    background: rgba(30, 41, 59, 0.95);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

Onde o glassmorfismo funciona bem, e onde não funciona

• Boas combinações: barras de navegação flutuantes sobre imagens principais, cartões de dashboard sobre um fundo de gradiente colorido, diálogos modais que se sobrepõem a conteúdo rico, widgets no estilo de tela de bloqueio, sobreposições de vídeo em que os controles do player se beneficiam de suavizar a imagem atrás deles.
• Arriscado: contêineres de texto de corpo (o contraste varia conforme o usuário rola), tabelas de dados (o ruído visual interfere na leitura das linhas), superfícies que ocupam toda a viewport (perda de desempenho), interfaces voltadas a usuários com baixa visão, a menos que combinadas com uma alternativa de transparência reduzida.
• Evite: botões primários de chamada para ação (a perda de contraste prejudica a conversão), painéis de erro ou aviso (precisam de legibilidade máxima), formulários com muito texto.

Erros comuns

1. Esquecer o fundo transparente. Definir o backdrop-filter em um elemento com um background-color opaco não produz nenhum efeito visível: a cor opaca cobre a amostra desfocada. Sempre o combine com um fundo rgba()/hsla().
2. Vidro sobre uma cor chapada. Se não há nada interessante atrás do painel, desfocá-lo não produz nenhum «vidro», apenas um retângulo levemente tingido. O efeito precisa de uma foto, um gradiente ou um fundo movimentado para se manifestar.
3. Pular o prefixo -webkit-. As versões mais antigas do Safari precisam dele. Ou entregue as duas linhas, ou confie no autoprefixer.
4. Empilhar painéis demais. Cada superfície filtrada é a sua própria camada de GPU. Três ou quatro costuma ser o limite prático antes de a taxa de quadros cair no celular.
5. Falhar na verificação de contraste de pior caso. Teste o painel contra as áreas mais claras e mais escuras de todo fundo sobre o qual ele vai ficar, não apenas uma captura de tela de demonstração.
6. Animar o raio de desfoque. Fazer a transição de backdrop-filter: blur(0) → blur(20px) no hover é tecnicamente permitido, mas recalcula o desfoque a cada quadro e é a maneira mais fácil de afundar o desempenho da rolagem. Anime o opacity ou o transform em vez disso, e deixe o desfoque estático.

Perguntas frequentes

Por que o meu cartão de vidro parece um painel chapado?

O background-color do próprio elemento é totalmente opaco. O backdrop-filter desfoca o que quer que esteja atrás do elemento, mas o elemento pinta por cima. Com um fundo opaco, essa pintura cobre a amostra desfocada. Mude para rgba() ou hsla() com 10-30% de alfa, o ponto ideal para a maioria dos designs de glassmorfismo.

Vai funcionar no Safari?

Sim, o Safari foi o primeiro navegador a lançar a propriedade, em agosto de 2015. As versões mais antigas do Safari precisam do prefixo -webkit-backdrop-filter; o Safari moderno aceita a forma sem prefixo. Incluir ambas mantém o mesmo CSS funcionando em toda versão do Safari ainda em uso ativo.

O glassmorfismo é acessível?

Apenas se você projetar para o fundo de pior caso. A WCAG 2.1 exige uma taxa de contraste de 4,5:1 para texto normal e 3:1 para componentes de interface grandes ou em negrito, medida contra qualquer cor que acabe sob o painel. Forneça uma alternativa opaca sob a media query prefers-reduced-transparency para que os usuários que desligaram a transparência no nível do sistema operacional recebam uma superfície legível.

Isso prejudica o desempenho?

Pode. Cada superfície filtrada força o navegador a manter uma camada de composição separada e a reamostrar a área atrás dela, e raios de desfoque grandes ou painéis empilhados acumulam o custo. Mantenha o raio abaixo de cerca de 20px, evite painéis que ocupam toda a viewport, e não o coloque sobre <video>. A orientação oficial do Web.dev é testar em um dispositivo de baixo desempenho representativo antes de publicar.

Qual é a diferença entre glassmorfismo e neumorfismo?

O neumorfismo (cunhado alguns meses antes) cria a ilusão de formas em relevo de plástico macio combinando sombras internas e externas sobre a mesma cor chapada do fundo da página, sem transparência, sem desfoque. O glassmorfismo mantém o fundo da página visível através de um painel translúcido e desfocado. São estilos complementares, em vez de concorrentes, e alguns designs usam os dois: um botão neumórfico em um cartão de vidro, por exemplo.

Posso copiar o CSS para uso em produção?

Sim. A saída é CSS simples, usando propriedades padrão, sem extensões proprietárias, sem JavaScript. Coloque a regra na sua folha de estilos e aplique a classe a qualquer elemento que deva parecer vidro.

Ferramentas relacionadas