Docs executáveis de CSS: Blur e filter

Q: Como desfocar um elemento no CSS?

Use filter: blur(5px);. O comprimento é o raio do desfoque: 0 é nítido e valores maiores ficam mais desfocados. Ele desfoca o elemento e tudo o que está dentro, incluindo texto e imagens.

Q: Como desfocar o fundo atrás de um elemento?

Use backdrop-filter: blur(10px); no elemento, com um fundo parcialmente transparente como rgb(255 255 255 / 0.5). O conteúdo do próprio elemento continua nítido e o que está atrás dele fica desfocado, o efeito de vidro fosco.

Q: Qual a diferença entre drop-shadow() e box-shadow?

box-shadow sempre segue a caixa retangular do elemento. filter: drop-shadow() segue o formato visível, incluindo as áreas transparentes de um PNG ou SVG, então a sombra de um ícone tem o contorno do ícone.

Q: Como deixar uma imagem preto e branco no CSS?

Use filter: grayscale(100%); (ou grayscale(1)). Acrescente uma transition e filter: grayscale(0) no hover para trazer a cor de volta.

Q: Dá para usar vários filtros ao mesmo tempo?

Sim, liste-os separados por espaços: filter: grayscale(1) brightness(1.2) blur(1px);. Eles são aplicados em ordem, então a ordem pode mudar o resultado. Uma segunda declaração filter substitui a primeira.

Desfocar um elemento

filter: blur() recebe um comprimento, o raio do desfoque. Quanto maior, mais desfocado fica o elemento:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CSS blur</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .row { display: flex; gap: 16px; flex-wrap: wrap; }
    img { display: block; width: 160px; height: 100px; }
    .b2 { filter: blur(2px); }
    .b6 { filter: blur(6px); }
  </style>
</head>
<body>
  <div class="row">
    <figure><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 100'%3E%3Crect width='160' height='100' fill='%2393c5fd'/%3E%3Ccircle cx='120' cy='30' r='16' fill='%23f59e0b'/%3E%3Cpath d='M0 100 L0 70 Q40 40 80 70 T160 60 L160 100Z' fill='%2316a34a'/%3E%3C/svg%3E" alt="Hills and a sun"><figcaption>no filter</figcaption></figure>
    <figure><img class="b2" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 100'%3E%3Crect width='160' height='100' fill='%2393c5fd'/%3E%3Ccircle cx='120' cy='30' r='16' fill='%23f59e0b'/%3E%3Cpath d='M0 100 L0 70 Q40 40 80 70 T160 60 L160 100Z' fill='%2316a34a'/%3E%3C/svg%3E" alt="Hills and a sun, slightly blurred"><figcaption>blur(2px)</figcaption></figure>
    <figure><img class="b6" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 100'%3E%3Crect width='160' height='100' fill='%2393c5fd'/%3E%3Ccircle cx='120' cy='30' r='16' fill='%23f59e0b'/%3E%3Cpath d='M0 100 L0 70 Q40 40 80 70 T160 60 L160 100Z' fill='%2316a34a'/%3E%3C/svg%3E" alt="Hills and a sun, very blurred"><figcaption>blur(6px)</figcaption></figure>
  </div>
</body>
</html>

O filter funciona em qualquer elemento, não só em imagens: uma div desfocada desfoca o texto, a borda e os filhos também. Repare nas bordas suaves das imagens desfocadas: o desfoque espalha a imagem para fora e a mistura com a área transparente em volta. A solução está mais abaixo, em "O problema das bordas desfocadas".

Desfocar o fundo: backdrop-filter

Para desfocar o que está atrás de um elemento (um painel de vidro fosco sobre uma foto ou uma página), use backdrop-filter. O conteúdo do próprio elemento continua nítido. Ele precisa de um fundo transparente para mostrar o desfoque:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>backdrop-filter</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 0; }
    .scene {
      position: relative;
      height: 200px;
      background:
        radial-gradient(circle at 25% 40%, #f59e0b 0 40px, transparent 41px),
        radial-gradient(circle at 70% 60%, #16a34a 0 55px, transparent 56px),
        repeating-linear-gradient(90deg, #2563eb 0 16px, #93c5fd 16px 32px);
    }
    .glass {
      position: absolute;
      inset: 40px 60px;
      display: grid;
      place-items: center;
      background: rgb(255 255 255 / 0.35);
      -webkit-backdrop-filter: blur(12px); /* older Safari */
      backdrop-filter: blur(12px);
      border: 1px solid rgb(255 255 255 / 0.6);
      border-radius: 12px;
      color: #111827;
      font-weight: 700;
    }
  </style>
</head>
<body>
  <div class="scene"><div class="glass">Sharp text on frosted glass</div></div>
</body>
</html>

As listras e os círculos ficam nítidos em volta do painel e desfocados atrás dele, enquanto o texto do painel não é tocado. Mantenha o texto legível: um tom mais claro ou mais escuro na cor de fundo ajuda em imagens carregadas.

Todas as funções de filter, ao vivo

Mexa em qualquer controle. A linha embaixo da imagem é o valor exato de filter, pronto para copiar:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Filter playground</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .controls { display: grid; grid-template-columns: repeat(2, max-content); gap: 4px 18px; }
    .controls input { vertical-align: middle; }
    #img { display: block; width: 220px; height: 138px; margin: 12px 0 8px; }
    code { display: block; background: #f3f4f6; padding: 6px; }
  </style>
</head>
<body>
  <div class="controls" id="controls"></div>
  <img id="img" alt="Hills and a sun" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 100'%3E%3Crect width='160' height='100' fill='%2393c5fd'/%3E%3Ccircle cx='120' cy='30' r='16' fill='%23f59e0b'/%3E%3Cpath d='M0 100 L0 70 Q40 40 80 70 T160 60 L160 100Z' fill='%2316a34a'/%3E%3C/svg%3E">
  <code id="out"></code>
  <script>
    // name, min, max, step, default (the value that changes nothing), unit
    const fns = [
      ['blur', 0, 10, 0.5, 0, 'px'], ['brightness', 0, 2, 0.05, 1, ''],
      ['contrast', 0, 2, 0.05, 1, ''], ['grayscale', 0, 1, 0.05, 0, ''],
      ['sepia', 0, 1, 0.05, 0, ''], ['saturate', 0, 3, 0.1, 1, ''],
      ['hue-rotate', 0, 360, 5, 0, 'deg'], ['invert', 0, 1, 0.05, 0, '']
    ];
    const controls = document.getElementById('controls');
    fns.forEach(([name, min, max, step, def]) => {
      controls.insertAdjacentHTML('beforeend', '<label>' + name + ' <input type="range" data-name="' + name + '" min="' + min + '" max="' + max + '" step="' + step + '" value="' + def + '"></label>');
    });
    const update = () => {
      const parts = fns.filter(([name, , , , def]) => Number(controls.querySelector('[data-name="' + name + '"]').value) !== def)
        .map(([name, , , , , unit]) => name + '(' + controls.querySelector('[data-name="' + name + '"]').value + unit + ')');
      const value = parts.join(' ') || 'none';
      document.getElementById('img').style.filter = value;
      document.getElementById('out').textContent = 'filter: ' + value + ';';
    };
    controls.addEventListener('input', update);
    update();
  </script>
</body>
</html>

Só as funções que você tirou do valor neutro são escritas, o que mantém o valor curto. brightness(1) ou blur(0px) não mudam nada, então não há motivo para listá-los.

Funções de filter

Função	Valor neutro	O que faz	Exemplo
`blur(r)`	`0`	desfoque gaussiano com raio r	`blur(4px)`
`brightness(n)`	`1`	mais escuro abaixo de 1, mais claro acima	`brightness(0.7)`
`contrast(n)`	`1`	mais chapado abaixo de 1, mais forte acima	`contrast(1.3)`
`grayscale(n)`	`0`	1 (ou 100%) é totalmente cinza	`grayscale(100%)`
`sepia(n)`	`0`	tom marrom quente	`sepia(0.6)`
`saturate(n)`	`1`	0 é cinza, acima de 1 mais vivo	`saturate(1.5)`
`hue-rotate(a)`	`0deg`	desloca todos os matizes pelo círculo cromático	`hue-rotate(90deg)`
`invert(n)`	`0`	1 é o negativo completo das cores	`invert(1)`
`opacity(n)`	`1`	como a propriedade `opacity`	`opacity(0.5)`
`drop-shadow(x y blur color)`		uma sombra que segue o formato	`drop-shadow(2px 4px 6px rgb(0 0 0 / 0.3))`

Os números também podem ser porcentagens (grayscale(100%) é igual a grayscale(1)). Várias funções vão em um só valor, separadas por espaços, e são aplicadas em ordem: filter: grayscale(1) sepia(1) dá um tom marrom, enquanto sepia(1) grayscale(1) termina em um cinza simples.

O drop-shadow segue o formato

box-shadow é sempre um retângulo (no máximo com cantos arredondados). drop-shadow() é desenhado a partir dos pixels visíveis, então um ícone transparente ganha uma sombra com o contorno do ícone:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>drop-shadow</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .row { display: flex; gap: 40px; padding: 10px 20px; }
    img { width: 90px; height: 90px; display: block; }
    .box-shadow { box-shadow: 6px 6px 8px rgb(0 0 0 / 0.4); }
    .drop-shadow { filter: drop-shadow(6px 6px 4px rgb(0 0 0 / 0.4)); }
  </style>
</head>
<body>
  <div class="row">
    <figure><img class="box-shadow" alt="Star" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f59e0b' d='M12 2l3 7h7l-5.5 4.5 2 7.5-6.5-4.5-6.5 4.5 2-7.5L2 9h7z'/%3E%3C/svg%3E"><figcaption>box-shadow</figcaption></figure>
    <figure><img class="drop-shadow" alt="Star" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f59e0b' d='M12 2l3 7h7l-5.5 4.5 2 7.5-6.5-4.5-6.5 4.5 2-7.5L2 9h7z'/%3E%3C/svg%3E"><figcaption>drop-shadow()</figcaption></figure>
  </div>
</body>
</html>

A primeira estrela projeta uma sombra quadrada a partir da caixa invisível que a envolve. A segunda projeta uma sombra em forma de estrela. Ao contrário do box-shadow, o drop-shadow() não tem spread nem inset; a página do box-shadow trata deles.

O problema das bordas desfocadas

Uma imagem desfocada some aos poucos nas bordas, porque o desfoque puxa os pixels transparentes em volta. Para manter uma borda nítida (em um fundo de destaque desfocado, por exemplo), coloque a imagem em um contêiner com overflow: hidden e aumente um pouco a imagem para a borda suave ser cortada:

.hero { overflow: hidden; }
.hero img { filter: blur(8px); transform: scale(1.1); }

Efeitos de hover com filter

O filter aceita transition, então uma parede de logos que vai do cinza para a cor, ou um card apagado até receber hover, são duas regras:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Filter on hover</title>
  <style>
    .logo {
      width: 120px;
      height: 70px;
      display: inline-block;
      background: linear-gradient(135deg, #2563eb, #16a34a);
      border-radius: 8px;
      filter: grayscale(1) opacity(0.6);
      transition: filter 0.3s ease;
    }
    .logo:hover, .logo:focus-visible { filter: none; }
  </style>
</head>
<body>
  <a class="logo" href="#" aria-label="Partner one"></a>
  <a class="logo" href="#" aria-label="Partner two"></a>
</body>
</html>

Passe o mouse sobre um bloco (ou chegue nele pelo Tab) e a cor dele aparece aos poucos.

Bom saber

Desempenho. Raios de desfoque grandes em áreas grandes são o que mais custa, principalmente backdrop-filter em elementos que se movem ou rolam. Teste em um celular.
Legibilidade. Nunca desfoque um texto que as pessoas precisam ler, e confira o contraste do texto sobre um painel de vidro fosco.
Empilhamento. Qualquer filter diferente de none cria um novo stacking context e vira o bloco que contém os descendentes com position: fixed, como o transform.

Erros comuns

filter: blur(5). O raio precisa de unidade: blur(5px).
Usar filter: blur() para um painel de vidro fosco. Ele desfoca o texto do próprio painel. Use backdrop-filter com um fundo transparente.
Um backdrop-filter que não mostra nada. O fundo do elemento precisa ser pelo menos parcialmente transparente, e precisa haver algo atrás dele.
Duas declarações filter. A segunda substitui a primeira. Coloque todas as funções em um só valor.
Sombras em forma de caixa em ícones transparentes. Use filter: drop-shadow() em vez de box-shadow.

Perguntas frequentes

Como desfocar um elemento no CSS?

Use filter: blur(5px);. O comprimento é o raio do desfoque: 0 é nítido e valores maiores ficam mais desfocados. Ele desfoca o elemento e tudo o que está dentro, incluindo texto e imagens.

Como desfocar o fundo atrás de um elemento?

Use backdrop-filter: blur(10px); no elemento, com um fundo parcialmente transparente como rgb(255 255 255 / 0.5). O conteúdo do próprio elemento continua nítido e o que está atrás dele fica desfocado, o efeito de vidro fosco.

Qual a diferença entre drop-shadow() e box-shadow?

box-shadow sempre segue a caixa retangular do elemento. filter: drop-shadow() segue o formato visível, incluindo as áreas transparentes de um PNG ou SVG, então a sombra de um ícone tem o contorno do ícone.

Como deixar uma imagem preto e branco no CSS?

Use filter: grayscale(100%); (ou grayscale(1)). Acrescente uma transition e filter: grayscale(0) no hover para trazer a cor de volta.

Dá para usar vários filtros ao mesmo tempo?

Sim, liste-os separados por espaços: filter: grayscale(1) brightness(1.2) blur(1px);. Eles são aplicados em ordem, então a ordem pode mudar o resultado. Uma segunda declaração filter substitui a primeira.

Conceitos relacionados