Glassmorphism e gradientes: um guia prático

O glassmorphism é um estilo de design feito de vidro fosco: painéis translúcidos que desfocam o que está por trás, sobrepostos a um fundo colorido, normalmente um gradiente. O painel guarda um toque da cor que tem por baixo, uma borda fina e clara apanha a luz, e a interface inteira parece feita de camadas e física. Os sistemas operativos usam materiais translúcidos há anos, e em 2025 a Apple pôs o vidro no centro da sua nova linguagem de design Liquid Glass, por isso este visual não vai desaparecer. Usado sem cuidado, porém, produz caixas cinzentas e texto ilegível.

Porque é que o glassmorphism precisa de um gradiente

O vidro fosco só parece vidro quando há algo colorido por trás para desfocar. Sobre um fundo branco ou cinzento liso, um painel de vidro é apenas um cinzento ligeiramente diferente. Sobre um gradiente rico, com poças de cor em pontos diferentes, o painel apanha uma cor suave que muda de uma margem para a outra, e é essa mudança que o olho lê como vidro. Por isso o gradiente não é decoração: é metade do efeito.

Os melhores fundos para vidro têm zonas de cor fortes e separadas e uma base escura ou profunda, tal como os gradientes de malha ou os gradientes aurora. Coloca a poça mais clara de modo a ficar parcialmente por trás de um painel; o painel vai brilhar onde se sobrepõe.

O CSS por trás do glassmorphism

O núcleo do efeito é o backdrop-filter, que aplica um filtro a tudo o que está por trás de um elemento e não ao próprio elemento. Junta-lhe um preenchimento semitransparente, uma borda fina e translúcida e uma sombra suave. As versões atuais dos principais navegadores suportam-no, e as versões mais antigas do Safari precisam do prefixo -webkit-; vê 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 assenta no que estiver por trás do painel. Um título que se lê bem sobre uma zona índigo escura pode desaparecer quando o painel desliza sobre um brilho rosa pálido. O contraste tem de aguentar o pior caso, não o da tua maqueta. As WCAG pedem 4,5:1 para o texto corrido; verifica-o no ponto mais claro que alguma vez possa ficar por trás das palavras.

Um truque fiável é tingir o vidro com a cor mais escura do fundo em vez de usar branco. Um vidro índigo escuro a 50% sobre um gradiente índigo e rosa mantém o texto branco legível em todo o lado, deixando ainda ver a cor. Para mais formas de manter as palavras nítidas, vê texto sobre gradiente.

Quando o glassmorphism ajuda e quando não ajuda

• Ajuda: navegação flutuante, janelas de diálogo, controlos multimédia, cartões sobre uma imagem principal e widgets ao estilo de ecrã de bloqueio, onde a camada tem de parecer acima do conteúdo
• Ajuda: páginas de produto e de lançamento onde o gradiente é a marca e o vidro o põe em evidência
• Prejudica: formulários, tabelas e leitura longa, onde as pessoas precisam de contraste calmo e constante
• Prejudica: páginas com muitas camadas de vidro empilhadas, que ficam turvas e custam desempenho
• Prejudica: qualquer sítio onde o fundo seja liso ou carregado de fotografias e texto pequeno

Como desenhar uma interface de vidro

1. 1

   Desenha primeiro o fundo

   Escolhe um gradiente com poças de cor separadas sobre uma base profunda. O vidro só será tão bom quanto o que tem por trás.

2. 2

   Limita o vidro a uma ou duas camadas

   A navegação e um nível de cartões chegam e sobram. Vidro sobre vidro sobre vidro fica cinzento.

3. 3

   Desfoca o suficiente para dissolver o detalhe

   Se ainda consegues distinguir formas por trás do painel, aumenta o desfoque antes de mais nada.

4. 4

   Tinge para ter contraste

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

5. 5

   Junta uma borda clara e uma sombra suave

   Uma borda translúcida de 1 px e uma sombra larga e ténue fazem o painel ler-se como uma folha física.

6. 6

   Testa o desempenho num telemóvel

   O desfoque de fundo é pesado de desenhar. Mantém as zonas desfocadas contidas e evita animá-las em superfícies grandes.

O vidro é um dos vários materiais que um gradiente pode vestir; a textura em gradientes compara-o com o grão, o papel e a seda. Se queres 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 podes desenhar com qualquer um deles de graça.