# Glassmorphism e gradientes: um guia prático

[Canonical HTML page](https://gradiently.design/pt-pt/guide/glassmorphism)

Vidro fosco sobre um gradiente luminoso é um dos efeitos mais atraentes no design de interfaces, e um dos mais fáceis de tornar ilegível. Eis como ficar com a beleza e manter as palavras.

## The short version

- O glassmorphism é um estilo de interface que usa painéis translúcidos e desfocados, como vidro fosco, sobrepostos a fundos coloridos.
- O efeito depende do fundo: vidro fosco sobre uma cor lisa parece uma caixa cinzenta, enquanto vidro sobre um gradiente rico brilha.
- O principal problema é o contraste, porque o texto sobre vidro assenta na cor que estiver por trás, e essa cor pode mudar à medida que a página desliza.
- Em CSS, o glassmorphism constrói-se com backdrop-filter blur, um preenchimento semitransparente, uma borda fina e clara e uma alternativa para navegadores sem suporte.
- O vidro funciona melhor em poucas camadas flutuantes, como navegação, cartões e janelas de diálogo, e não em todas as superfícies de uma página.

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.

- Violeta para ciano: `radial-gradient(circle at 20% 25%, #8b5cf6 0%, #4c1d95 25%, #0e7490 55%, #0f172a 90%)`
- Brilho rosa sobre índigo: `radial-gradient(circle at 75% 20%, #f472b6 0%, #7c3aed 35%, #1e1b4b 75%)`
- Pôr do sol sob vidro: `radial-gradient(ellipse at 30% 80%, #fb923c 0%, #db2777 35%, #3b0764 80%)`

Fundos que dão ao vidro algo para apanhar: poças de cor distintas em vez de uma transição suave e uniforme.

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](https://gradiently.design/pt-pt/guide/mesh-gradients) ou os [gradientes aurora](https://gradiently.design/pt-pt/guide/aurora-gradients). 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](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter) e o [caniuse](https://caniuse.com/css-backdrop-filter).

```css
.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); }
}
```

Um painel fosco com alternativa. O `saturate()` mantém a cor desfocada viva em vez de desbotada.

| Propriedade | Valor inicial | O que controla |
| --- | --- | --- |
| Desfoque | 16 a 30 px | Quanto o fundo se dissolve. Pouco demais e o detalhe transparece através do texto |
| Opacidade do preenchimento | 10 a 25% de branco, ou 40 a 70% escuro | Quanto o painel se separa do fundo |
| Saturação | 120 a 160% | Mantém a cor desfocada viva em vez de cinzenta |
| Borda | 1 px a 15 a 30% de branco | A margem clara que dá credibilidade ao vidro |
| Sombra | Grande, suave, pouco opaca | Levanta o painel do fundo |

Pontos de partida para afinar a olho. Um desfoque mais forte e um preenchimento mais denso são sempre mais seguros para o texto.

## 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.

### Vidro ilegível

- Desfoque leve, com as formas de trás a verem-se através das letras
- Preenchimento muito transparente sobre um fundo claro
- Texto branco, fino e leve
- Painéis de vidro a deslizar sobre conteúdo que muda

### Vidro legível

- Desfoque de 16 px ou mais para o fundo se dissolver
- Um preenchimento tingido forte o suficiente para garantir contraste
- Pesos médios ou negritos para texto sobre vidro
- Vidro fixo sobre um fundo conhecido e controlado

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](https://gradiently.design/pt-pt/guide/text-on-gradient).

## 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. **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. **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. **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. **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. **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. **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](https://gradiently.design/pt-pt/guide/gradient-texture) 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.

## FAQ

### O que é o glassmorphism?

O glassmorphism é um estilo de design que usa painéis translúcidos de vidro fosco, com fundo desfocado, uma borda clara e uma sombra suave, sobrepostos a gradientes coloridos.

### Como faço um efeito de vidro em CSS?

Usa `backdrop-filter: blur()` com uma cor de fundo semitransparente, uma borda fina e translúcida e uma sombra suave, mais o prefixo `-webkit-` para o Safari mais antigo.

### O glassmorphism é acessível?

Pode ser, se o desfoque for forte, o preenchimento for tingido o suficiente para manter o texto com contraste de 4,5:1 sobre o fundo mais claro e houver uma alternativa sólida.

### Porque é que o meu painel de vidro parece cinzento?

O fundo por trás é demasiado liso. O vidro precisa de zonas de cor fortes e separadas por trás para as apanhar.

### O backdrop-filter prejudica o desempenho?

Custa mais do que um fundo normal, sobretudo em áreas grandes ou durante animações. Usa-o em poucos painéis e testa em telemóveis.