# Backdrop filter no CSS: vidro fosco que continua rápido

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

O vidro fosco leva três linhas de CSS e ainda pode fazer um bom celular engasgar. Veja o código, quanto custa desenhá-lo e os planos B que mantêm o texto legível quando o desfoque não chega.

## The short version

- O backdrop-filter do CSS aplica efeitos, como o desfoque, à área atrás de um elemento, não ao elemento em si.
- Um elemento precisa de um fundo parcialmente transparente para o backdrop-filter aparecer; sobre um fundo sólido, o efeito fica escondido.
- O custo do desfoque cresce com o raio e com o tamanho da área desfocada, e é pago de novo toda vez que o conteúdo atrás se move.
- O Safari exigiu o prefixo -webkit-backdrop-filter até a versão 18, então entregar as duas linhas continua sendo a escolha segura.
- Um bom plano B é um fundo mais opaco dentro de uma consulta @supports, para o texto continuar legível quando o desfoque não está disponível.

Um **backdrop filter** no CSS aplica um efeito gráfico, em geral desfoque, ao que está atrás de um elemento. Escreva `backdrop-filter: blur(12px)` em um elemento com fundo parcialmente transparente e a página embaixo se suaviza, o visual de vidro fosco usado em barras de navegação, painéis e cartões. Ele é compatível com todos os navegadores atuais. O ofício está em manter a área desfocada pequena, o raio modesto e o plano B legível.

## A receita básica de vidro fosco

Três coisas fazem o vidro: um preenchimento translúcido para o fundo aparecer, o desfoque em si e uma borda tênue para o painel ter forma. A maioria também acrescenta um pequeno ganho de saturação, porque desfocar tira a média das cores e as deixa mais acinzentadas do que o esperado.

```css
.glass {
  background: rgb(255 255 255 / 0.14);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgb(255 255 255 / 0.22);
  border-radius: 16px;
}
```

Um painel de vidro claro para uma página escura ou colorida. Deixe a linha com prefixo primeiro, para a propriedade padrão vencer onde as duas são entendidas.

O vidro só parece vidro quando há algo que valha a pena desfocar atrás. Numa página cinza chapada, o painel só parece opaco. Coloque-o sobre uma fotografia ou um gradiente rico, como [glassmorphism](https://gradiently.design/pt-br/guide/glassmorphism) explica com mais profundidade.

Brasa e violeta sobre a meia-noite: `radial-gradient(circle at 20% 25%, #f97316 0%, transparent 40%), radial-gradient(circle at 80% 70%, #7c3aed 0%, transparent 45%), linear-gradient(160deg, #0f172a 0%, #1e1b4b 100%)`

Um fundo com manchas de cor bem distintas. O desfoque transforma as manchas em luz suave atrás do painel, que é o objetivo do efeito.

## O que as funções do backdrop-filter podem fazer

A propriedade aceita as mesmas funções de `filter`, e você pode encadeá-las em uma só declaração. Elas se aplicam em ordem, da esquerda para a direita, então `blur()` seguido de `saturate()` se comporta de modo diferente do inverso. A lista completa está na [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter).

| Função | Exemplo | Boa para |
| --- | --- | --- |
| `blur()` | `blur(12px)` | Vidro fosco, foco atrás de uma caixa de diálogo |
| `saturate()` | `saturate(160%)` | Devolver a cor que o desfoque deixa cinza |
| `brightness()` | `brightness(0.7)` | Escurecer uma área agitada atrás de texto claro |
| `contrast()` | `contrast(0.8)` | Acalmar uma foto ruidosa sob um painel |
| `grayscale()` | `grayscale(1)` | Apagar a página atrás de um modal |
| `none` | `none` | Desligar o efeito em um plano B ou media query |

As funções que você realmente vai usar. `brightness()` abaixo de 1 costuma ser uma ferramenta de legibilidade melhor que um desfoque mais pesado.

## Desempenho do backdrop filter

O desfoque é uma das coisas mais caras que um navegador desenha. Para desfocar uma região, ele precisa ler cada pixel atrás do elemento, amostrar os vizinhos até o raio do desfoque e compor o resultado, e repete esse trabalho sempre que algo atrás do painel muda. Um cabeçalho fixo sobre uma página que rola redesenha o desfoque a cada quadro da rolagem.

O custo escala com dois números que você controla: a área do elemento e o raio. Um cabeçalho de 64 pixels desfocado a 12px é barato em quase tudo. Uma sobreposição de tela cheia desfocada a 40px sobre um vídeo pode derrubar quadros num celular intermediário. O quadro mais amplo está em [desempenho de gradientes CSS](https://gradiently.design/pt-br/guide/css-gradient-performance).

### Lento

- Desfocar a viewport inteira atrás de um modal
- Raios de 30px ou mais
- Animar o raio do desfoque ao abrir e fechar
- Painéis de vidro dentro de painéis de vidro
- Desfoque sobre vídeo com reprodução automática

### Rápido

- Desfocar só a barra, o cartão ou o painel que precisa
- Raios entre 8px e 20px
- Fazer a opacidade do painel aparecer gradualmente, com o desfoque fixo
- Uma camada de vidro, preenchimentos sólidos dentro dela
- Desfoque sobre imagens estáticas e gradientes

> **Meça em um celular de verdade** Nas ferramentas de desenvolvedor do Chrome, abra o painel Rendering, ative o paint flashing e role a página. Se o vidro pisca a cada quadro e o painel Performance mostra quadros perdidos, reduza a área ou o raio antes de qualquer outra coisa.

## Por que o backdrop-filter não funciona

Quando o desfoque parece não fazer nada, a causa é quase sempre uma de uma lista curta.

1. **Veja se o fundo é transparente** Um `background: #fff` sólido cobre por completo o fundo desfocado. Use um valor alfa, como `rgb(255 255 255 / 0.15)`.
2. **Adicione o prefixo do Safari** O Safari só aceita a propriedade sem prefixo a partir da versão 18. iPhones mais antigos ainda precisam de `-webkit-backdrop-filter`.
3. **Procure uma raiz de backdrop acima** Um elemento pai com `filter`, `opacity` abaixo de 1, uma máscara ou o próprio backdrop filter limita o que o filho enxerga. O filho então desfoca só esse pai, o que muitas vezes parece nenhum desfoque.
4. **Cuidado com filhos fixos** Como o `filter`, o backdrop filter faz do elemento o bloco contêiner de filhos com posição fixa e absoluta. Um menu fixo dentro de um cabeçalho de vidro se posiciona em relação ao cabeçalho, não à janela.
5. **Garanta que haja algo atrás** O desfoque sobre uma cor chapada é invisível. Role o painel sobre uma imagem para confirmar que funciona.

## Um plano B que mantém o texto legível

Painéis translúcidos são desenhados em torno do desfoque. Sem ele, um preenchimento branco de 14 por cento sobre uma foto agitada deixa o texto sobre a própria foto, e o contraste desaba. Escreva primeiro a versão legível e depois a melhore onde o navegador consegue desfocar.

```css
/* Works everywhere: opaque enough to read on its own */
.glass {
  background: rgb(15 23 42 / 0.86);
  color: #f8fafc;
}

/* Upgrade where blur is available */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass {
    background: rgb(15 23 42 / 0.45);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
  }
}

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

Aprimoramento progressivo para o vidro. O suporte a `prefers-reduced-transparency` ainda é limitado, então trate esse bloco como cortesia, não como garantia.

Confira o contraste no pior ponto atrás do painel, não na média. Um título branco sobre um vidro que passa por um céu claro pode ficar bem abaixo das taxas de [contraste de cores e acessibilidade](https://gradiently.design/pt-br/guide/color-contrast-accessibility). Escurecer com `brightness(0.7)` costuma resolver isso com mais segurança do que desfocar mais forte.

## Quando você nem precisa de desfoque

Muito vidro fosco existe só para tornar as palavras legíveis sobre um fundo agitado. Se o fundo é seu para projetar, um mais calmo resolve o problema sem custo de renderização. Um gradiente suave e de baixo contraste atrás de um hero dispensa o painel; veja [fundos de hero para sites](https://gradiently.design/pt-br/guide/website-hero-background) e [fundos desfocados](https://gradiently.design/pt-br/guide/blurred-background), em que o desfoque é gravado na imagem uma vez em vez de calculado a cada quadro.

Hero largo de site com um título atravessando a parte mais brilhante de um gradiente colorido

Palavras direto sobre um fundo vivo: é aqui que as pessoas recorrem a um painel de vidro.

O mesmo hero de site em que o gradiente fica mais escuro e silencioso atrás do título

O mesmo fundo se acalmando atrás das palavras, sem painel, sombra nem desfoque.

Essa segunda abordagem é como o Gradiently trata a legibilidade: um Mark sabe onde estão as palavras e leva sua região mais calma e de melhor contraste para trás delas, então você nunca precisa de caixa nem de desfoque para resgatar um título.

## FAQ

### Qual a diferença entre filter e backdrop-filter?

`filter` altera o elemento e seu conteúdo. `backdrop-filter` altera só o que é visível atrás do elemento, através do fundo transparente dele.

### Por que o desfoque do meu backdrop-filter não aparece?

Em geral o fundo do elemento é totalmente opaco, o Safari precisa do prefixo `-webkit-` ou um elemento pai com `filter`, `opacity` ou máscara limita o que o elemento enxerga.

### O backdrop-filter é ruim para o desempenho?

Pode ser. O custo cresce com a área e o raio desfocados e é pago de novo sempre que o conteúdo atrás se move, então mantenha os painéis de vidro pequenos e os raios modestos.

### Ainda preciso do -webkit-backdrop-filter?

O Safari aceita a propriedade sem prefixo a partir da versão 18, mas iPhones mais antigos continuam em uso, então entregar as duas linhas ainda faz sentido.

### Que valor de desfoque fica melhor em vidro fosco?

Entre 8px e 20px serve para a maioria das interfaces. Acrescente `saturate()` acima de 100% para devolver a cor que o desfoque tira.