Por que não aparece nada no meu projeto?

Glassmorphism precisa de algo atrás para desfocar. Numa página totalmente branca, um fundo branco a 95 % com backdrop-blur fica idêntico a um fundo a 95 % sem blur - não há nada para desfocar. Coloque uma imagem colorida, gradiente ou padrão carregado atrás do card; o efeito aparece na hora.

Como isso difere de um fundo semitransparente normal?

`background: rgba(255,255,255,0.5)` deixa o fundo passar inalterado - legível se o fundo for liso, ilegível se for carregado. `backdrop-filter: blur(20px)` mais um fundo translúcido desfocam o fundo *antes* de ele aparecer, então o texto em cima fica legível por mais caótica que seja a imagem atrás. O blur é o que faz o glassmorphism funcionar; só a transparência não basta.

Backdrop-filter é suportado em todo lugar?

Chrome, Edge, Safari modernos (com prefixo `-webkit-` em versões antigas) e Firefox 103+. Firefox mais antigo cai para sem blur - o fundo ainda aparece, só que nítido, o que geralmente funciona como experiência degradada. Para UI crítica, adicione um fundo mais opaco como fallback (`background: rgba(255,255,255,0.9)`) para o design aguentar sem o blur.

Por que é ruim para performance?

`backdrop-filter: blur()` obriga o browser a alocar um buffer off-screen do tamanho do elemento, desfocar os pixels atrás e então compor. No scroll, isso acontece por frame para cada elemento glass à vista. Um ou dois cards glass por página tudo bem; uma lista de 20 itens em glass ao mesmo tempo derruba o frame rate em laptops mais modestos. Faça profiling antes de subir uma interface pesada de glass.

Gerador de glassmorphism

Vidro fosco em CSS com pré-visualização ao vivo - ajuste cor de fundo, backdrop blur, borda e sombra sobre um fundo carregado.

Fundo

Cor de fundo

Opacidade fundo20%

Cor da borda

Opacidade borda35%

Backdrop blur16px

Border radius16px

Desfoque da sombra32px

CSS

background: rgba(255, 255, 255, 0.20);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 16px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);

Pré-visualização

Vidro fosco

Painéis translúcidos com backdrop blur forte e borda sutil.

Glassmorphism = fundo translúcido + backdrop blur forte + borda fina + sombra suave. A pré-visualização coloca seu card sobre um fundo carregado para o blur ficar visível (o efeito some sobre fundo liso - precisa de algo atrás). Os quatro ingredientes têm sliders; a pré-visualização atualiza ao vivo e o bloco CSS está pronto para colar.

Como usar

Escolha um backdrop
Alterne entre imagem, gradiente e padrão carregado na pré-visualização - o efeito glass muda de sentido com cada um.
Ajuste transparência + blur
O alpha do fundo controla quanto o backdrop aparece; o backdrop blur controla quanto ele é amaciado. Os dois trabalham juntos.
Adicione borda + sombra
Uma borda translúcida esbranquiçada de 1 px dá ao vidro uma aresta física. Uma sombra suave o ergue da superfície.
Copie o CSS
As quatro declarações (background, backdrop-filter, border, box-shadow) vêm num bloco só, prontas para colar.

O que é?

Glassmorphism é a estética UI de vidro fosco - painéis translúcidos respaldados por um forte desfoque de fundo. A receita CSS é curta: `background-color` com alpha < 1, `backdrop-filter: blur(...)`, uma borda fina (geralmente `rgba(255,255,255,0.18)`), `border-radius` generoso e um `box-shadow` suave opcional para profundidade. A ilusão só funciona quando há algo colorido atrás do painel para o blur agir - em fundos chapados o efeito vira só um retângulo translúcido.

Quando usar

Superfícies UI flutuantes sobre imagens ou vídeos de hero, navegações sobre fundos de foto, modais sobre um backdrop desfocado da página debaixo, cards em páginas de marketing onde o fundo é gradiente vibrante ou foto, e overlays tipo tooltip onde se quer sugerir uma camada por cima sem substituir a página.

Erros comuns

Desenhar o card glass contra um fundo chapado no Figma e depois se surpreender que em produção não aparece nada - teste contra o fundo colorido real. Empilhar glass sobre glass (a qualidade do blur degrada e a frame rate despenca). Esquecer a borda - sem ela, glass parece um borrão; o highlight fino é o que se lê como «aresta de vidro físico». Pular o box-shadow - profundidade é o que separa vidro de celofane.

FAQ

O que é glassmorphism?: Uma tendência de design popularizada pelo macOS Big Sur e Windows 11 onde superfícies UI parecem vidro fosco: fundo semitransparente, conteúdo atrás desfocado, borda sutil para pegar a luz e sombra suave para a profundidade. Diferente do neumorphism (que finge 3D com duas sombras opostas) e do skeuomorphism (que imita materiais reais em detalhe).
Por que não aparece nada no meu projeto?: Glassmorphism precisa de algo atrás para desfocar. Numa página totalmente branca, um fundo branco a 95 % com backdrop-blur fica idêntico a um fundo a 95 % sem blur - não há nada para desfocar. Coloque uma imagem colorida, gradiente ou padrão carregado atrás do card; o efeito aparece na hora.
Como isso difere de um fundo semitransparente normal?: `background: rgba(255,255,255,0.5)` deixa o fundo passar inalterado - legível se o fundo for liso, ilegível se for carregado. `backdrop-filter: blur(20px)` mais um fundo translúcido desfocam o fundo *antes* de ele aparecer, então o texto em cima fica legível por mais caótica que seja a imagem atrás. O blur é o que faz o glassmorphism funcionar; só a transparência não basta.
Backdrop-filter é suportado em todo lugar?: Chrome, Edge, Safari modernos (com prefixo `-webkit-` em versões antigas) e Firefox 103+. Firefox mais antigo cai para sem blur - o fundo ainda aparece, só que nítido, o que geralmente funciona como experiência degradada. Para UI crítica, adicione um fundo mais opaco como fallback (`background: rgba(255,255,255,0.9)`) para o design aguentar sem o blur.
Por que é ruim para performance?: `backdrop-filter: blur()` obriga o browser a alocar um buffer off-screen do tamanho do elemento, desfocar os pixels atrás e então compor. No scroll, isso acontece por frame para cada elemento glass à vista. Um ou dois cards glass por página tudo bem; uma lista de 20 itens em glass ao mesmo tempo derruba o frame rate em laptops mais modestos. Faça profiling antes de subir uma interface pesada de glass.