# Backdrop filter in CSS: vetro smerigliato che resta veloce

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

Il vetro smerigliato richiede tre righe di CSS e può comunque far scattare un buon telefono. Ecco il codice, quanto costa disegnarlo e le alternative che tengono leggibili le parole quando la sfocatura non arriva.

## The short version

- Il backdrop filter CSS applica effetti come la sfocatura all’area dietro un elemento, non all’elemento stesso.
- Un elemento ha bisogno di uno sfondo parzialmente trasparente perché un backdrop filter si veda; su uno sfondo pieno l’effetto è nascosto.
- Il costo della sfocatura cresce con il raggio e con la dimensione dell’area sfocata, e si paga di nuovo ogni volta che il contenuto dietro si muove.
- Safari ha richiesto il prefisso -webkit-backdrop-filter fino alla versione 18, quindi scrivere entrambe le righe resta la scelta sicura.
- Una buona alternativa è uno sfondo più opaco dentro una query @supports, così il testo resta leggibile quando manca la sfocatura.

Un **backdrop filter** in CSS applica un effetto grafico, di solito la sfocatura, a ciò che sta dietro un elemento. Scrivi `backdrop-filter: blur(12px)` su un elemento con uno sfondo parzialmente trasparente e la pagina sotto si ammorbidisce, ed è l’aspetto a vetro smerigliato usato in barre di navigazione, pannelli e card. È supportato in ogni browser attuale. L’arte sta nel tenere piccola l’area sfocata, modesto il raggio e leggibile l’alternativa.

## La ricetta base del vetro smerigliato

Tre cose fanno il vetro: un riempimento traslucido perché si veda lo sfondo, la sfocatura stessa e un bordo tenue perché il pannello abbia una forma. La maggior parte aggiunge anche un piccolo aumento di saturazione, perché sfocare fa la media dei colori e li lascia più grigi del previsto.

```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;
}
```

Un pannello di vetro chiaro per una pagina scura o colorata. Tieni per prima la riga con il prefisso, così la proprietà standard vince dove sono capite entrambe.

Il vetro sembra vetro solo quando dietro c’è qualcosa che vale la pena sfocare. Su una pagina grigia uniforme il pannello sembra solo spento. Mettilo sopra una fotografia o un gradiente ricco, come spiega più a fondo il [glassmorphism](https://gradiently.design/it/guide/glassmorphism).

Brace e viola sulla mezzanotte: `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%)`

Uno sfondo con macchie di colore distinte. La sfocatura trasforma le macchie in luce morbida dietro il pannello, che è il senso dell’effetto.

## Cosa possono fare le funzioni di backdrop-filter

La proprietà accetta le stesse funzioni di `filter`, e puoi concatenarle in una sola dichiarazione. Si applicano in ordine, da sinistra a destra, quindi `blur()` poi `saturate()` si comporta diversamente dall’inverso. L’elenco completo è su [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter).

| Funzione | Esempio | Utile per |
| --- | --- | --- |
| `blur()` | `blur(12px)` | Vetro smerigliato, messa a fuoco dietro una finestra di dialogo |
| `saturate()` | `saturate(160%)` | Ridare colore dopo che la sfocatura lo ingrigisce |
| `brightness()` | `brightness(0.7)` | Scurire un’area affollata dietro testo chiaro |
| `contrast()` | `contrast(0.8)` | Calmare una foto rumorosa sotto un pannello |
| `grayscale()` | `grayscale(1)` | Attenuare la pagina dietro un modale |
| `none` | `none` | Disattivare l’effetto in un’alternativa o in una media query |

Le funzioni che userai davvero. `brightness()` sotto 1 è spesso uno strumento di leggibilità migliore di una sfocatura più forte.

## Prestazioni del backdrop filter

La sfocatura è una delle cose più costose che un browser disegna. Per sfocare una regione deve leggere ogni pixel dietro l’elemento, campionare i vicini fino al raggio di sfocatura e comporre il risultato, e ripete quel lavoro ogni volta che qualcosa dietro il pannello cambia. Un’intestazione fissa su una pagina che scorre ridisegna la sua sfocatura a ogni fotogramma dello scorrimento.

Il costo scala con due numeri che controlli: l’area dell’elemento e il raggio. Un’intestazione di 64 pixel sfocata a 12px è economica su quasi tutto. Un overlay a schermo intero sfocato a 40px su un video può far saltare fotogrammi su un telefono di fascia media. Il quadro più ampio è in [prestazioni dei gradienti CSS](https://gradiently.design/it/guide/css-gradient-performance).

### Lento

- Sfocare l’intera finestra dietro un modale
- Raggi da 30px in su
- Animare il raggio di sfocatura in apertura e chiusura
- Pannelli di vetro dentro pannelli di vetro
- Sfocatura su un video in riproduzione automatica

### Veloce

- Sfocare solo la barra, la card o il pannello che serve
- Raggi tra 8px e 20px
- Far comparire il pannello con l’opacità, con la sfocatura fissa
- Un solo livello di vetro, riempimenti pieni al suo interno
- Sfocatura su immagini statiche e gradienti

> **Misura su un telefono vero** Negli strumenti per sviluppatori di Chrome, apri il pannello Rendering, attiva il lampeggio delle aree ridisegnate e scorri. Se il vetro lampeggia a ogni fotogramma e il pannello Prestazioni mostra fotogrammi persi, riduci l’area o il raggio prima di tutto.

## Perché backdrop-filter non funziona

Quando la sfocatura sembra non fare nulla, la causa è quasi sempre una di un breve elenco.

1. **Controlla che lo sfondo sia trasparente** Un `background: #fff` pieno copre del tutto lo sfondo sfocato. Usa un valore alfa come `rgb(255 255 255 / 0.15)`.
2. **Aggiungi il prefisso per Safari** Safari accetta la proprietà senza prefisso solo dalla versione 18. I vecchi iPhone hanno ancora bisogno di `-webkit-backdrop-filter`.
3. **Cerca una radice di sfondo sopra di esso** Un genitore con `filter`, `opacity` sotto 1, una maschera o un proprio backdrop filter limita ciò che il figlio può vedere. Il figlio sfoca allora solo quel genitore, il che spesso sembra nessuna sfocatura.
4. **Attenzione ai figli fissi** Come `filter`, un backdrop filter rende l’elemento il blocco contenitore dei figli con posizione fissa e assoluta. Un menu fisso dentro un’intestazione di vetro si posizionerà rispetto all’intestazione, non alla finestra.
5. **Assicurati che dietro ci sia qualcosa** La sfocatura su un colore uniforme è invisibile. Fai scorrere il pannello su un’immagine per confermare che funziona.

## Un’alternativa che tiene leggibile il testo

I pannelli traslucidi sono pensati attorno alla sfocatura. Senza di essa, un riempimento bianco al 14 per cento su una foto affollata lascia il testo sulla foto stessa, e il contrasto crolla. Scrivi prima la versione leggibile, poi migliorala dove il browser può sfocare.

```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;
  }
}
```

Miglioramento progressivo per il vetro. Il supporto di `prefers-reduced-transparency` è ancora limitato, quindi tratta quel blocco come una cortesia e non una garanzia.

Controlla il contrasto sul punto peggiore dietro il pannello, non sulla media. Un titolo bianco su un vetro che scorre su un cielo luminoso può scendere ben sotto i rapporti di [contrasto dei colori e accessibilità](https://gradiently.design/it/guide/color-contrast-accessibility). Scurire con `brightness(0.7)` di solito lo risolve in modo più affidabile che sfocare di più.

## Quando non ti serve affatto una sfocatura

Molto vetro smerigliato esiste solo per rendere leggibili le parole su uno sfondo affollato. Se lo sfondo lo progetti tu, uno più calmo risolve il problema senza costo di rendering. Un gradiente morbido e a basso contrasto dietro un hero non ha bisogno di pannello; vedi [sfondi hero per siti](https://gradiently.design/it/guide/website-hero-background) e [sfondi sfocati](https://gradiently.design/it/guide/blurred-background), dove la sfocatura è cotta nell’immagine una volta sola invece di essere calcolata a ogni fotogramma.

Un hero largo di un sito con un titolo che attraversa la parte più luminosa di un gradiente colorato

Parole dritte su uno sfondo vivace: è qui che si cerca un pannello di vetro.

Lo stesso hero di sito in cui il gradiente diventa più scuro e quieto dietro il titolo

Lo stesso sfondo che si calma dietro le parole, senza pannello, ombra o sfocatura.

Quel secondo approccio è come Gradiently gestisce la leggibilità: un Mark sa dove sono le parole e sposta la sua regione più calma e con il miglior contrasto dietro di esse, così non ti serve mai un riquadro o una sfocatura per salvare un titolo.

## FAQ

### Che differenza c’è tra filter e backdrop-filter?

`filter` cambia l’elemento e il suo contenuto. `backdrop-filter` cambia solo ciò che si vede dietro l’elemento, attraverso il suo sfondo trasparente.

### Perché la sfocatura di backdrop-filter non si vede?

Di solito lo sfondo dell’elemento è del tutto opaco, Safari ha bisogno del prefisso `-webkit-`, oppure un genitore con `filter`, `opacity` o una maschera limita ciò che l’elemento può vedere.

### Backdrop-filter fa male alle prestazioni?

Può. Il costo cresce con l’area sfocata e il raggio e si paga di nuovo ogni volta che il contenuto dietro si muove, quindi tieni piccoli i pannelli di vetro e modesti i raggi.

### Mi serve ancora -webkit-backdrop-filter?

Safari accetta la proprietà senza prefisso dalla versione 18, ma i vecchi iPhone sono ancora in uso, quindi scrivere entrambe le righe resta sensato.

### Quale valore di sfocatura sta meglio per il vetro smerigliato?

Tra 8px e 20px va bene per la maggior parte delle interfacce. Aggiungi `saturate()` sopra il 100% per ridare il colore che la sfocatura toglie.