Glassmorphism CSS: Vidro Fosco Passo a Passo

O CSS Glassmorphism é o visual de vidro fosco que você vê nos painéis do macOS, widgets do iOS e dashboards modernos: um cartão translúcido que desfoca tudo o que está atrás dele. O efeito inteiro se resume a duas declarações, backdrop-filter: blur() e um background semitransparente, sobrepostos a um fundo colorido. Acertando esses pontos e adicionando um destaque de borda fina, o vidro parece real.

Aqui está a parte que a maioria dos geradores pula. O cartão em si é os 20% fáceis. O motivo pelo qual sua versão parece sem vida enquanto as imagens do Dribbble parecem vivas é quase sempre o fundo atrás do vidro, não o vidro. Este guia constrói o efeito do zero, corrige as três coisas que o fazem parecer barato e aborda o suporte do navegador que você precisa saber antes de publicar.

O Que o Glassmorphism CSS Realmente É#

Glassmorphism é uma superfície de vidro fosco criada ao desfocar o conteúdo atrás de um elemento, e não o elemento em si. Você empilha um preenchimento de baixa opacidade sobre backdrop-filter: blur(), adiciona uma borda clara e sutil, e deixa um fundo vibrante aparecer. O desfoque combinado com a transparência é o que vende a ilusão de "vidro real".

Essa distinção é importante. filter: blur() desfoca o elemento ao qual você aplica. backdrop-filter: blur() desfoca tudo que é pintado atrás dele e mantém o conteúdo do elemento nítido. O Glassmorphism precisa do segundo, e é por isso que um único nome de propriedade errado é o motivo mais comum para o efeito "não funcionar".

O visual tem três ingredientes obrigatórios e um toque opcional:

• Um fundo semitransparente (geralmente branco ou preto com 10 a 25% de opacidade).
• Um desfoque de fundo para que o fundo se suavize em um fosco.
• Um fundo vívido e multicolorido atrás do cartão para que haja algo interessante para desfocar.
• Um destaque de borda interna de 1px que simula a forma como a luz incide na borda do vidro.

O maior erro é testar o glassmorphism sobre uma página plana ou branca. Não há nada para desfocar, então o cartão parece um cinza de baixa opacidade comum. Sempre construa sobre um gradiente ou uma foto.

Como Criar o Efeito CSS Glassmorphism#

Esta é a receita completa. Siga os passos em ordem, porque cada um corrige uma forma específica de o efeito parecer plano.

Passo 1: Coloque um Gradiente Vívido Atrás do Cartão#

O fundo faz a maior parte do trabalho visual. Um cartão fosco sobre uma parede cinza é um gelo cinza. Um cartão fosco sobre um gradiente magenta-ciano é o visual que as pessoas realmente querem. Comece pelo fundo, não pelo cartão.

body {
  min-height: 100vh;
  background: linear-gradient(135deg, #7b2ff7 0%, #f107a3 50%, #00c6ff 100%);
}

Duas ou três cores saturadas e contrastantes misturadas produzem o suave brilho de cor que parece vidro. Se você não tem certeza de quais cores se mantêm depois de desfocadas, crie o fundo com um gerador de gradiente CSS gratuito e pré-visualize algumas combinações antes de decidir. Gradientes turvos ou de baixo contraste viram lama sob o desfoque, então teste.

Passo 2: Adicione a Camada Semitransparente#

Agora o cartão. Dê a ele um preenchimento que deixe o fundo aparecer. Branco com baixa opacidade funciona na maioria dos fundos; preto com baixa opacidade é adequado para cenas escuras ou neon.

.glass {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 2rem;
}

Use rgba() (ou a sintaxe moderna rgb(255 255 255 / 12%)) em vez da propriedade opacity. Definir opacity desbota o elemento inteiro, incluindo seu texto e filhos. Você só quer o fundo translúcido, nunca o conteúdo sobre o vidro.

Passo 3: Aplique o Desfoque de Fundo#

Esta é a linha que transforma uma caixa translúcida em vidro fosco.

.glass {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 16px;
  padding: 2rem;
}

Um raio de desfoque de 8px a 16px atinge o ponto ideal. Abaixo de 6px o gelo é quase invisível; acima de 20px o fundo se dissolve em uma pasta e você perde a sensação de que há conteúdo real atrás do vidro. Sempre emparelhe a propriedade padrão com -webkit-backdrop-filter, porque o Safari ainda precisa do prefixo.

Passo 4: Adicione o Destaque da Borda que Vende o Efeito#

Aqui está o detalhe que quase todo gerador deixa de fora, e é a diferença entre "obviamente CSS" e "parece vidro de verdade." Vidro real capta luz nas bordas superior e esquerda. Você simula isso com uma borda sutil, clara e semitransparente.

.glass {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 16px;
  padding: 2rem;
}

A borda clara de 1px parece o brilho de um painel de vidro. Para uma borda ainda mais convincente, adicione um destaque interno usando box-shadow. A linha branca interna imita a luz refratando ao longo da borda interna:

.glass {
  /* ...propriedades anteriores... */
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

Esse destaque inset 0 1px 0 é o ingrediente secreto. A sombra externa levanta o cartão da página; a linha interna dá à borda superior aquele brilho vítreo nítido.

Passo 5: Ajuste Profundidade e Contraste#

Com todos os quatro ingredientes no lugar, ajuste a gosto:

• Opacidade controla o aspecto fosco. Menor (8 a 12%) é mais transparente; maior (18 a 25%) é mais leitoso e mais legível para texto.
• Raio de desfoque controla o quão suave o fundo fica. Mais desfoque significa mais privacidade e menos detalhes visíveis atrás.
• Sombra externa controla o quão longe o cartão flutua acima da página. Suavize e espalhe para uma sensação mais elevada.
• Opacidade da borda controla o quão pronunciada a borda do vidro parece. Borda mais brilhante equivale a vidro mais brilhante.

Um Exemplo Completo de Copiar e Colar#

Juntando todas as etapas, aqui está um snippet funcional completo que você pode inserir em qualquer projeto.

<div class="glass">
  <h2>Cartão de Vidro Fosco</h2>
  <p>Desfoque de fundo sobre um gradiente vibrante.</p>
</div>

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #7b2ff7 0%, #f107a3 50%, #00c6ff 100%);
}

.glass {
  max-width: 360px;
  padding: 2rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  color: #fff;
}

Troque o gradiente pela sua própria paleta, reduza a opacidade se o texto ficar difícil de ler, e você terá um cartão de vidro pronto para produção. Se quiser reutilizar os mesmos tons em botões, badges e no fundo da página, fixe-os com um gerador de paleta de cores para design de marca para que toda a interface permaneça consistente.

As Propriedades que Controlam a Aparência#

Use isto como referência rápida ao ajustar uma superfície de vidro.

Propriedade	O que faz	Faixa típica
backdrop-filter: blur()	Fosqueia o conteúdo atrás do cartão	8px a 16px
background: rgba()	Define o preenchimento translúcido	0.08 a 0.25 alfa
border: 1px solid rgba()	Borda leve que simula uma borda de vidro	0.2 a 0.3 alfa
box-shadow (externa)	Eleva o cartão da página	suave, grande, baixo alfa
box-shadow (interna)	Destaque interno nítido na borda superior	inset 0 1px 0 branco
border-radius	Arredonda os cantos (vidro raramente é afiado)	12px a 24px

Você também pode combinar valores de backdrop-filter. Adicionar um toque de saturação faz as cores do fundo aparecerem através do fosco: backdrop-filter: blur(12px) saturate(160%). Esse aumento de saturação é um truque favorito para fazer o vidro parecer mais rico sem alterar o preenchimento do próprio cartão.

Suporte de Navegadores e as Pegadinhas que Ninguém Menciona#

backdrop-filter tem suporte sólido nos navegadores modernos (Chrome, Edge, Safari e Firefox), mas existem armadilhas reais que vão te pegar em produção.

• Safari precisa do prefixo. Sempre use -webkit-backdrop-filter junto com a propriedade padrão. Sem ele, o Safari renderiza uma caixa translúcida sem desfoque.
• Firefox já teve restrições. O backdrop-filter foi habilitado por padrão no Firefox 103. Versões mais antigas exigiam uma flag, então versões muito antigas mostram o preenchimento sem o efeito fosco. Para a maioria dos públicos isso não é mais um problema, mas se suas análises mostrarem tráfego de Firefox legado, planeje um fallback.
• É pesado para a GPU. Cada elemento com backdrop-filter força o navegador a reamostrar e desfocar o que está atrás. Uma página com dezenas de cartões desfocados ou desfoque em uma lista de rolagem pode causar queda de quadros em dispositivos mais fracos. Use em algumas superfícies principais, não em todos os itens da lista.

O padrão de fallback limpo é uma consulta de recurso. Dê a todos um cartão opaco legível e depois atualize para o efeito fosco apenas onde o navegador suporta:

.glass {
  background: rgba(255, 255, 255, 0.7); /* fallback legível */
}

@supports (backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px)) {
  .glass {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
}

Aviso de acessibilidade: texto branco com baixa opacidade sobre um gradiente movimentado pode falhar nos testes de contraste. O vidro fica ótimo em protótipos, mas falha com usuários reais. Aumente a opacidade do preenchimento, escureça o texto ou adicione uma camada sólida sutil atrás do texto para mantê-lo legível contra qualquer fundo.

Quando usar o Glassmorfismo (e quando evitar)#

O glassmorfismo brilha em sobreposições que ficam acima de conteúdo rico: barras de navegação sobre uma imagem de herói, modais sobre um painel, cartões de widget sobre um gradiente. O desfoque cria profundidade e mantém a camada inferior levemente visível, que é exatamente a dica espacial que ele deve transmitir.

É a escolha errada quando não há nada significativo atrás do cartão, quando a legibilidade do texto é crítica (leitura longa, tabelas de dados) ou quando você precisa repeti-lo centenas de vezes em uma página. Nesses casos, um cartão sólido com uma sombra suave tem melhor desempenho e é mais legível.

Trate o vidro como um tempero, não como a refeição inteira. Uma ou duas superfícies de vidro sobre um fundo gradiente forte parecem premium. Vinte delas empilhadas em uma página plana parecem um bug.

Conclusão#

O CSS Glassmorphism é genuinamente simples quando você vê a receita completa: um fundo gradiente vibrante, um preenchimento semitransparente, backdrop-filter: blur() com o prefixo WebKit e uma borda clara de 1px com um destaque interno para simular a borda do vidro. O cartão é a parte fácil. O fundo e a borda são o que fazem parecer real em vez de morto.

Comece acertando o gradiente, porque todo o resto é sobreposto a ele. Crie e visualize seu fundo no gerador de gradiente CSS gratuito, leia o guia aprofundado sobre fundos gradientes CSS modernos para ideias de paletas e, em seguida, coloque o cartão de vidro por cima. Quando estiver pronto para exportar o design como uma imagem plana, um conversor gratuito de SVG para PNG transforma seus vetores exportados nos ativos rasterizados de que você precisa.

Perguntas Frequentes#

Por que meu CSS de vidro fosco parece plano ou cinza? Quase sempre porque não há nada vívido atrás do cartão. O efeito fosco desfoca o fundo, então sobre uma página branca ou cinza liso o resultado é apenas um cinza opaco e sem graça. Coloque um gradiente saturado e multicolorido ou uma foto atrás do vidro e o visual ganha vida instantaneamente.

Qual é a diferença entre desfoque de filtro e desfoque de backdrop-filter? filter: blur() desfoca o elemento ao qual é aplicado, incluindo seu próprio texto e filhos. backdrop-filter: blur() desfoca apenas o conteúdo pintado atrás do elemento, mantendo o conteúdo do elemento nítido. O vidro fosco precisa de backdrop-filter, e é por isso que usar o errado faz o efeito parecer não funcionar.

O backdrop-filter funciona em todos os navegadores? Funciona no Chrome, Edge, Safari e Firefox 103 ou superior modernos. O Safari exige o prefixo -webkit-backdrop-filter além da propriedade padrão, e versões muito antigas do Firefox tinham isso atrás de uma flag. Use uma consulta de recurso @supports com um preenchimento opaco de fallback para cobrir navegadores sem suporte.

Por que devo evitar a propriedade opacity para cartões de vidro? A propriedade opacity desbota o elemento inteiro, incluindo qualquer texto ou botões sobre o vidro, o que torna o conteúdo ilegível. Use um valor de fundo rgba() ou rgb()/... para que apenas o preenchimento seja translúcido enquanto o conteúdo permanece totalmente opaco.

O vidro fosco é ruim para desempenho? Pode ser. Cada elemento com backdrop-filter força o navegador a reamostrar e desfocar os pixels atrás dele, o que exige muito da GPU. Algumas superfícies de vidro são aceitáveis, mas desfocar dezenas de cartões ou aplicar dentro de uma lista rolável pode causar quedas de quadros em dispositivos mais fracos, então use com moderação em elementos de destaque.

Como manter o vidro fosco acessível? Observe o contraste do texto. Texto claro com baixa opacidade sobre um gradiente movimentado frequentemente falha nas verificações de contraste da WCAG. Aumente a opacidade do preenchimento, escureça ou negrite o texto, ou adicione uma camada sólida sutil atrás do bloco de texto para que ele permaneça legível independentemente da cor do fundo que aparece naquele ponto.