# Glassmorphism e gradientes: um guia prático

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

O vidro fosco sobre um gradiente luminoso é um dos efeitos mais atraentes do design de interfaces e um dos mais fáceis de tornar ilegível. Veja como ter a beleza sem perder as palavras.

## The short version

- O glassmorphism é um estilo de interface que usa painéis translúcidos e desfocados, como vidro fosco, sobre fundos coloridos.
- O efeito depende do fundo: o vidro fosco sobre uma cor chapada parece uma caixa cinza, enquanto o vidro sobre um gradiente rico brilha.
- O principal problema dele é o contraste, porque o texto sobre o vidro fica sobre qualquer cor que esteja atrás, o que pode mudar quando a página rola.
- Em CSS, o glassmorphism é construído com desfoque de backdrop-filter, um preenchimento semitransparente, uma borda clara e fina e uma reserva para navegadores sem suporte.
- O vidro funciona melhor em poucas camadas flutuantes, como navegação, cartões e diálogos, e não em todas as superfícies de uma página.

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.

- Violeta em 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 o vidro: `radial-gradient(ellipse at 30% 80%, #fb923c 0%, #db2777 35%, #3b0764 80%)`

Fundos que dão ao vidro algo para captar: poças de cor distintas em vez de uma mistura lisa e uniforme.

Os melhores fundos para vidro têm áreas de cor fortes e separadas e uma base escura ou profunda, como os [gradientes de malha](https://gradiently.design/pt-br/guide/mesh-gradients) ou os [gradientes de aurora](https://gradiently.design/pt-br/guide/aurora-gradients). 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](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 reserva. O `saturate()` mantém a cor desfocada viva em vez de desbotada.

| Propriedade | Valor inicial | O que controla |
| --- | --- | --- |
| Desfoque | 16 a 30 px | O quanto o fundo se dissolve. Se for pouco, o detalhe aparece através do texto |
| Opacidade do preenchimento | 10 a 25% de branco, ou 40 a 70% de escuro | O quanto o painel se separa do fundo |
| Saturação | 120 a 160% | Mantém a cor desfocada vívida em vez de cinza |
| Borda | 1 px a 15 a 30% de branco | A borda brilhante que vende o vidro |
| Sombra | Grande, suave, de baixa opacidade | Levanta o painel do fundo |

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

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

### Vidro ilegível

- Desfoque leve, então as formas de trás aparecem através das letras
- Preenchimento muito transparente sobre um fundo brilhante
- Texto branco fino e de peso leve
- Painéis de vidro rolando sobre conteúdo que muda

### Vidro legível

- Desfoque de 16 px ou mais para o fundo se dissolver
- Um preenchimento com tom, forte o bastante para garantir o contraste
- Pesos medium ou negrito no texto sobre vidro
- Vidro fixo sobre um fundo conhecido e controlado

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

## 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. **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. **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. **Desfoque o suficiente para dissolver o detalhe** Se você ainda distingue formas atrás do painel, aumente o desfoque antes de qualquer coisa.
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. **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. **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](https://gradiently.design/pt-br/guide/gradient-texture) 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.

## FAQ

### O que é glassmorphism?

Glassmorphism é um estilo de design que usa painéis translúcidos de vidro fosco, com fundos desfocados, uma borda clara e uma sombra suave, sobrepostos a gradientes coloridos.

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

Use `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 antigo.

### O glassmorphism é acessível?

Pode ser, se o desfoque for forte, o preenchimento tiver tom suficiente para manter o texto a 4,5:1 de contraste sobre a parte mais clara do fundo e houver uma reserva sólida.

### Por que o meu painel de vidro parece cinza?

O fundo atrás dele é chapado demais. O vidro precisa de áreas de cor fortes e separadas atrás para captar.

### O backdrop-filter prejudica o desempenho?

Custa mais que um fundo normal, sobretudo em áreas grandes ou durante animações. Use em poucos painéis e teste em celulares.