Backdrop filter in CSS: vetro smerigliato che resta veloce

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.

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

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.

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.

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.

Perché backdrop-filter non funziona

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

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

/* 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;
  }
}

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à. 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 e sfondi sfocati, dove la sfocatura è cotta nell’immagine una volta sola invece di essere calcolata a ogni fotogramma.

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.