Glassmorphism e gradientes: um guia prático

O glassmorphism é um estilo de design construído com vidro fosco: painéis translúcidos que desfocam o que está atrás deles, sobrepostos a um fundo colorido, em geral um gradiente. O painel guarda um traço da cor que há embaixo, uma borda fina e brilhante captura a luz, e a interface inteira parece em camadas e física. Os sistemas operacionais usam materiais translúcidos há anos e, em 2025, a Apple fez do vidro o centro da sua nova linguagem de design Liquid Glass, então o visual não vai embora. Usado sem cuidado, porém, produz caixas cinza e texto ilegível.

Por que o glassmorphism precisa de um gradiente

O vidro fosco só parece vidro quando há algo colorido atrás para desfocar. Sobre um fundo branco ou cinza chapado, um painel de vidro é só um cinza um pouco diferente. Sobre um gradiente rico, com poças de cor em pontos diferentes, o painel capta uma cor suave que muda de uma borda à outra, e essa mudança é o que o olho lê como vidro. Então o gradiente não é decoração: é metade do efeito.

Os melhores fundos para vidro têm áreas de cor fortes e separadas e uma base escura ou profunda, como os gradientes de malha ou os gradientes de aurora. Posicione a poça mais brilhante de modo que fique em parte atrás de um painel; o painel brilhará onde se sobrepuser.

O CSS por trás do glassmorphism

O núcleo do efeito é o backdrop-filter, que aplica um filtro a tudo que está atrás de um elemento e não ao elemento em si. Combine-o com um preenchimento semitransparente, uma borda fina e translúcida e uma sombra suave. As versões atuais dos principais navegadores o aceitam, e as versões antigas do Safari precisam do prefixo -webkit-; veja o MDN sobre backdrop-filter e o caniuse.

.glass {
  background: rgb(255 255 255 / 0.12);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgb(255 255 255 / 0.24);
  border-radius: 20px;
  box-shadow: 0 10px 40px rgb(0 0 0 / 0.25);
  color: #ffffff;
}

/* Without backdrop-filter, use a solid, readable panel instead */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgb(15 23 42 / 0.88); }
}

/* Respect people who ask for less transparency, where supported */
@media (prefers-reduced-transparency: reduce) {
  .glass { background: rgb(15 23 42 / 0.92); }
}

Glassmorphism e contraste

O maior problema do vidro é que o texto fica sobre o que estiver atrás do painel. Um título que se lê bem sobre uma área índigo escura pode sumir quando o painel rola sobre um brilho rosa pálido. O contraste precisa se manter no pior caso, não no do seu mockup. A WCAG pede 4,5:1 para o texto corrido; confira no ponto mais claro que pode ficar atrás das palavras.

Um truque confiável é dar ao vidro um tom da cor mais escura do fundo em vez de usar branco. Um vidro índigo escuro a 50% sobre um gradiente de índigo e rosa mantém o texto branco legível em todo lugar, sem deixar de mostrar a cor por baixo. Para mais formas de manter as palavras nítidas, veja o texto sobre gradiente.

Quando o glassmorphism ajuda e quando não

• Ajuda: navegação flutuante, diálogos, controles de mídia, cartões sobre um herói e widgets de tela de bloqueio, em que a camada precisa parecer acima do conteúdo
• Ajuda: páginas de produto e de lançamento em que o gradiente é a marca e o vidro a realça
• Atrapalha: formulários, tabelas e leitura longa, em que as pessoas precisam de contraste calmo e constante
• Atrapalha: páginas com muitas camadas de vidro empilhadas, que ficam turvas e custam desempenho
• Atrapalha: onde o fundo é chapado ou agitado, com fotos e texto pequeno

Como desenhar uma interface de vidro

1. 1

   Desenhe primeiro o fundo

   Escolha um gradiente com poças de cor separadas sobre uma base profunda. O vidro só será tão bom quanto o que há atrás dele.

2. 2

   Limite o vidro a uma ou duas camadas

   Navegação e um nível de cartões bastam. Vidro sobre vidro sobre vidro vira cinza.

3. 3

   Desfoque o suficiente para dissolver o detalhe

   Se você ainda distingue formas atrás do painel, aumente o desfoque antes de qualquer coisa.

4. 4

   Dê tom para o contraste

   Escolha a cor e a opacidade de preenchimento que mantêm o texto legível sobre a parte mais clara do fundo.

5. 5

   Acrescente uma borda clara e uma sombra suave

   Uma borda translúcida de 1 px e uma sombra larga e tênue fazem o painel parecer uma folha física.

6. 6

   Teste o desempenho num celular

   O desfoque de fundo é caro de desenhar. Mantenha as áreas desfocadas modestas e evite animá-las em superfícies grandes.

O vidro é um de vários materiais que um gradiente pode vestir; a textura de gradiente o compara com grão, papel e seda. Se você quer um fundo que já tenha as poças, a profundidade e a luz de que o vidro precisa, muitos Marks do Mercado são feitos assim, e você pode criar com qualquer um deles de graça.