Guida CSS interattiva: Blur e filter

Q: Come sfoco un elemento in CSS?

Usa filter: blur(5px);. La lunghezza è il raggio della sfocatura: 0 è nitido e i valori più grandi sono più sfocati. Sfoca l'elemento e tutto ciò che contiene, compresi testo e immagini.

Q: Come sfoco lo sfondo dietro un elemento?

Usa backdrop-filter: blur(10px); sull'elemento, con uno sfondo in parte trasparente come rgb(255 255 255 / 0.5). Il contenuto dell'elemento resta nitido e ciò che c'è dietro viene sfocato: è l'effetto vetro smerigliato.

Q: Che differenza c'è tra drop-shadow() e box-shadow?

box-shadow segue sempre il box rettangolare dell'elemento. filter: drop-shadow() segue la forma visibile, comprese le aree trasparenti di un PNG o di un SVG, quindi l'ombra di un'icona ha il contorno dell'icona.

Q: Come rendo un'immagine in bianco e nero con il CSS?

Usa filter: grayscale(100%); (o grayscale(1)). Aggiungi una transizione e filter: grayscale(0) all'hover per far tornare il colore.

Q: Posso usare più filtri insieme?

Sì, elencali separati da spazi: filter: grayscale(1) brightness(1.2) blur(1px);. Vengono applicati in ordine, quindi l'ordine può cambiare il risultato. Una seconda dichiarazione filter sostituisce la prima.

Sfocare un elemento

filter: blur() accetta una lunghezza, il raggio della sfocatura. Più è grande, più l'elemento è sfocato:

<!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>

filter funziona su qualsiasi elemento, non solo sulle immagini: un div sfocato sfoca anche il suo testo, il bordo e i figli. Nota i bordi morbidi delle immagini sfocate: la sfocatura allarga l'immagine verso l'esterno e la mescola con l'area trasparente attorno. La soluzione è più sotto, in "Il problema dei bordi sfocati".

Sfocare lo sfondo: backdrop-filter

Per sfocare ciò che sta dietro un elemento (un pannello di vetro smerigliato sopra una foto o una pagina), usa backdrop-filter. Il contenuto dell'elemento resta nitido. Serve uno sfondo trasparente per vedere la sfocatura:

<!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>

Le strisce e i cerchi sono nitidi attorno al pannello e sfocati dietro di esso, mentre il testo del pannello resta intatto. Mantieni il testo leggibile: una tinta più chiara o più scura nel colore di sfondo aiuta sulle immagini piene di dettagli.

Tutte le funzioni di filtro, dal vivo

Muovi un cursore qualsiasi. La riga sotto l'immagine è il valore esatto di filter, pronto da copiare:

<!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>

Vengono scritte solo le funzioni che hai spostato dal loro valore neutro, così il valore resta breve. brightness(1) o blur(0px) non cambiano nulla, quindi non c'è motivo di elencarle.

Funzioni di filtro

Funzione	Valore neutro	Cosa fa	Esempio
`blur(r)`	`0`	Sfocatura gaussiana con raggio r	`blur(4px)`
`brightness(n)`	`1`	più scuro sotto 1, più luminoso sopra	`brightness(0.7)`
`contrast(n)`	`1`	più piatto sotto 1, più incisivo sopra	`contrast(1.3)`
`grayscale(n)`	`0`	1 (o 100%) è tutto grigio	`grayscale(100%)`
`sepia(n)`	`0`	tono marrone caldo	`sepia(0.6)`
`saturate(n)`	`1`	0 è grigio, sopra 1 più vivace	`saturate(1.5)`
`hue-rotate(a)`	`0deg`	sposta ogni tonalità lungo la ruota dei colori	`hue-rotate(90deg)`
`invert(n)`	`0`	1 è un negativo completo dei colori	`invert(1)`
`opacity(n)`	`1`	come la proprietà `opacity`	`opacity(0.5)`
`drop-shadow(x y blur color)`		un'ombra che segue la forma	`drop-shadow(2px 4px 6px rgb(0 0 0 / 0.3))`

I numeri possono anche essere percentuali (grayscale(100%) equivale a grayscale(1)). Più funzioni vanno in un solo valore, separate da spazi, e vengono applicate in ordine: filter: grayscale(1) sepia(1) dà una tinta marrone, mentre sepia(1) grayscale(1) finisce in un semplice grigio.

drop-shadow segue la forma

box-shadow è sempre un rettangolo (al massimo con angoli arrotondati). drop-shadow() viene disegnata a partire dai pixel visibili, quindi un'icona trasparente riceve un'ombra con il contorno dell'icona:

<!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>

La prima stella proietta un'ombra quadrata dal suo riquadro invisibile. La seconda ne proietta una a forma di stella. A differenza di box-shadow, drop-shadow() non ha un valore di spread né inset; la pagina su box-shadow li spiega.

Il problema dei bordi sfocati

Un'immagine sfocata sfuma ai bordi, perché la sfocatura attira i pixel trasparenti attorno. Per mantenere un bordo netto (per esempio per uno sfondo sfocato in apertura di pagina), metti l'immagine in un contenitore con overflow: hidden e ingrandisci leggermente l'immagine, così il bordo morbido viene tagliato:

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

Effetti hover con filter

filter si può animare con una transizione, quindi una parete di loghi che passa dal grigio al colore o una scheda attenuata fino all'hover sono due regole:

<!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>

Passa il mouse su un riquadro (o raggiungilo con Tab) e il suo colore compare in dissolvenza.

Buono a sapersi

Prestazioni. I raggi di sfocatura grandi su aree grandi sono i più costosi, soprattutto backdrop-filter su elementi che si muovono o scorrono. Prova su un telefono.
Leggibilità. Non sfocare mai un testo che le persone devono leggere, e controlla il contrasto del testo sopra un pannello smerigliato.
Contesto di sovrapposizione. Qualsiasi filter diverso da none crea un nuovo stacking context e diventa il blocco contenitore per i discendenti con position: fixed, come transform.

Errori comuni

filter: blur(5). Il raggio richiede un'unità: blur(5px).
Usare filter: blur() per un pannello smerigliato. Sfoca il testo del pannello stesso. Usa backdrop-filter con uno sfondo trasparente.
Un backdrop-filter che non mostra nulla. Lo sfondo dell'elemento deve essere almeno in parte trasparente, e dietro deve esserci qualcosa.
Due dichiarazioni filter. La seconda sostituisce la prima. Metti tutte le funzioni in un solo valore.
Ombre a forma di box su icone trasparenti. Usa filter: drop-shadow() invece di box-shadow.

Domande frequenti

Come sfoco un elemento in CSS?

Usa filter: blur(5px);. La lunghezza è il raggio della sfocatura: 0 è nitido e i valori più grandi sono più sfocati. Sfoca l'elemento e tutto ciò che contiene, compresi testo e immagini.

Come sfoco lo sfondo dietro un elemento?

Usa backdrop-filter: blur(10px); sull'elemento, con uno sfondo in parte trasparente come rgb(255 255 255 / 0.5). Il contenuto dell'elemento resta nitido e ciò che c'è dietro viene sfocato: è l'effetto vetro smerigliato.

Che differenza c'è tra drop-shadow() e box-shadow?

box-shadow segue sempre il box rettangolare dell'elemento. filter: drop-shadow() segue la forma visibile, comprese le aree trasparenti di un PNG o di un SVG, quindi l'ombra di un'icona ha il contorno dell'icona.

Come rendo un'immagine in bianco e nero con il CSS?

Usa filter: grayscale(100%); (o grayscale(1)). Aggiungi una transizione e filter: grayscale(0) all'hover per far tornare il colore.

Posso usare più filtri insieme?

Sì, elencali separati da spazi: filter: grayscale(1) brightness(1.2) blur(1px);. Vengono applicati in ordine, quindi l'ordine può cambiare il risultato. Una seconda dichiarazione filter sostituisce la prima.

Concetti correlati