Cos'è il glassmorfismo? Come il filtro fondale costruisce il vetro smerigliato nei CSS

I pannelli di vetro smerigliato sono ovunque nel design dell'interfaccia: la barra laterale traslucida su un sistema operativo desktop, l'intestazione sfocata che lascia passare una foto, la scheda che fluttua su un gradiente su una pagina di destinazione L'aspetto è semplice da descrivere e stranamente facile da sbagliare in CSS Un pannello finisce piatto e grigio, o la sfocatura non fa nulla, o il testo bianco su di esso è illeggibile su metà dello sfondo.

Questa guida spiega il CSS che fa funzionare l'effetto, perché ciascuna delle cinque proprietà è lì, come mantenere il testo leggibile quando lo sfondo continua a cambiare, cosa costa nel rendering delle prestazioni e come ripiegare con grazia Gli esempi lavorati utilizzano l'output del Generatore CSS di Toolz glassmorphism, che costruisce il codice da cursori e un'anteprima live.

tl; dr: Glassmorphism è uno stile di interfaccia utente in cui un pannello sembra vetro smerigliato: uno sfondo semitrasparente plus backdrop-filter: blur() quindi il contenuto dietro di esso si mostra in modo morbido, solitamente rifinito con un bordo traslucido 1 px e un'ombra morbida. Ha bisogno di due cose per essere visibile: un riempimento che sia in parte trasparente e qualcosa di colorato dietro il pannello. Il contrasto del testo cambia con qualunque cosa passi sotto, quindi testalo contro le parti più luminose e scure dello sfondo reale. Il Generatore di glassmorphism CSS scrive il blocco completo, incluso il -webkit- prefisso, lato client, gratuito, nessuna iscrizione.

Cos'è il vetromorfismo in CSS?

Il glassmorfismo è uno stile visivo che imita il vetro smerigliato Un elemento ottiene un colore di sfondo con bassa opacità e un filtro di sfondo che sfuma i pixel dietro di esso, quindi forme e colori sottostanti appaiono ammorbiditi attraverso la superficie Un sottile bordo chiaro suggerisce il bordo di vetro, e un'ombra delicata solleva il pannello fuori dalla pagina.

La proprietà chiave è backdrop-filter, definito nel W3C Modulo Effetti Filtro Livello 2. Assume le stesse funzioni del filtro di filter (blur(), saturate(), brightness() e il resto) ma li applica all'area dietro l'elemento piuttosto che all'elemento stesso. Quella differenza è ciò che rende possibile l'effetto.

Ecco il blocco completo che il generatore produce per il suo preset Frosted:

background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px) saturate(120%);
-webkit-backdrop-filter: blur(10px) saturate(120%);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);

Sei linee, e ognuna ha un lavoro.

filtro vs sfondo-filtro: qual è la differenza?

filter cambia il modo in cui l'elemento stesso è disegnato, compreso il suo testo e i bambini. backdrop-filter cambia ciò che mostra attraverso l'elemento da dietro e lascia l'elemento' il proprio contenuto nitido.

Proprietà	Cosa influisce	Risultato dell'esempio di sfocatura	Uso tipico
filter: blur(10px)	L'elemento e tutti i suoi figli	La carta e il suo testo sono sfocati	Effetti immagine, stati disabilitati, segnaposto di caricamento
backdrop-filter: blur(10px)	Qualunque cosa sia dipinta dietro l'elemento	La carta rimane affilata, lo sfondo visto attraverso di essa è sfocato	Pannelli di vetro smerigliato, intestazioni sfocate, sovrapposizioni modali

Se si sfoca una carta con filter e mi chiedo perché l'intestazione sia illeggibile, hai usato la proprietà sbagliata Il Generatore di filtri CSS copre il filter lato della coppia.

Come funziona ogni linea del vetro CSS?

Lo sfondo è la tinta e il suo canale alfa è il numero più importante nel blocco. rgba(255, 255, 255, 0.2) è bianco al 20% di opacità Ad un alfa di 1 il pannello è solido e non traspare nulla, quindi la sfocatura dello sfondo è invisibile Ad un alfa di 0 non c'è alcuna superficie La maggior parte del vetro utilizzabile si trova tra 0,1 e 0,4.

Nel generatore questo è il cursore Trasparenza, e la denominazione ha bisogno di una nota: il cursore imposta l'opacità del riempimento, quindi un valore Trasparenza più alto rende il pannello più solido Trasparenza Il 20% scrive un alfa di 0,2, e il 40% scrive 0,4.

Il filtro fondale fa la glassa. blur(10px) imposta il raggio della sfocatura applicato a ciò che si trova dietro. saturate(120%) aumenta il colore di quello sfondo sfocato del 20%, il che contrasta l'aspetto grigio e slavato che la sfocatura più una tinta bianca tende a produrre Il generatore's Il cursore Sfocatura funziona da 0 a 40 px e Saturazione dal 100% al 200%.

La copia prefissata esiste perché le versioni precedenti di Safari capiscono solo -webkit-backdrop-filter. Scrivere entrambe le righe con valori identici non costa nulla e copre quelle versioni.

Il raggio di confine arrotonda gli angoli, da 0 a 50 px nel generatore La sfocatura è agganciata alla forma arrotondata.

Il confine è una linea 1 px di bianco con un'opacità del 18%. cattura l'occhio come un punto culminante sul bordo di vetro e conta di più su sfondi più scuri, dove il bordo del pannello altrimenti si dissolverebbe Il generatore' s Border checkbox lo accende o spegne; il colore e la larghezza sono fissi.

L'ombra 0 8px 32px rgba(0, 0, 0, 0.12) è un'ombra di goccia ampia e debole che separa il pannello dalla pagina Se vuoi sintonizzarlo, il guida ombra box spiega offset, sfocatura e diffusione in profondità.

Cosa producono i preset del generatore?

I preset sono punti di partenza piuttosto che disegni finiti Tutti e cinque utilizzano un raggio di 16 px, e tutti tranne Subtle includono il bordo.

Scaldare	fondo	Filtro di sfondo	Confine	Meglio finita
Glassato	rgba(255, 255, 255, 0.2)	blur(10px) saturate(120%)	Su	Gradienti e foto colorate
Luce	rgba(255, 255, 255, 0.35)	blur(6px) saturate(130%)	Su	Immagini occupate in cui il testo ha bisogno di più supporto
Scuro	rgba(15, 23, 42, 0.25)	blur(12px) saturate(120%)	Su	Foto luminose, testo bianco
Vibrante	rgba(139, 92, 246, 0.15)	blur(16px) saturate(180%)	Su	Sezioni di eroi scuri o saturi
Sottile	rgba(255, 255, 255, 0.12)	blur(4px) saturate(120%)	Fuori	Piccole patatine e badge

Il generatore si carica con Frosted selezionato Fare clic su un preset, regolare i cursori e il colore della tinta e il blocco di codice si aggiorna mentre si trascina.

Perché il mio filtro per fondali non funziona?

Quando la sfocatura sembra non fare nulla, una di queste è quasi sempre la causa.

1. Lo sfondo è opaco. Un solido background: #fff oppure un alfa pari a 1 nasconde completamente lo sfondo Abbassa l'alfa.
2. Non c'è niente dietro da sfocare. Su una pagina piatta monocolore, un colore piatto sfocato sembra identico al colore piatto Il vetro ha bisogno di un gradiente, una foto o forme dietro di esso L'anteprima del generatore's si trova deliberatamente su un gradiente con cerchi colorati per questo motivo; il Guida al gradiente CSS è una buona fonte di sfondi che mostrano bene l'effetto.
3. Manca il prefisso. Le versioni precedenti di Safari ignorano la proprietà non prefissata.
4. Un antenato limita ciò che il filtro può vedere. Nella specifica attuale degli effetti filtro, alcune proprietà su un antenato, come la propria filter, un opacity sotto 1 o un altro backdrop-filter, avviare una nuova radice di sfondo, e la sfocatura campiona solo il contenuto all'interno di quella radice Se il vetro si trova all'interno di un involucro con uno di questi, spostare l'effetto o la proprietà.
5. Il pannello non ha dimensioni o è completamente trasparente in un altro modo. Un elemento ad altezza zero o opacity: 0 sul pannello nasconde l'effetto insieme al pannello.

Come si mantiene il testo leggibile su un pannello di vetro?

Il vetro leggibile richiede più lavoro di qualsiasi altra parte dello stile, perché il colore del testo è fisso mentre lo sfondo sotto il pannello no. Il WCAG 2.2 contrasto minimo chiede un rapporto di almeno 4,5:1 per il testo normale e 3:1 per il testo di grandi dimensioni Su un pannello traslucido tale rapporto dipende da cosa si trova dietro ogni parte del pannello in quel momento.

Un esempio elaborato rende questo concreto Il rapporto di contrasto è calcolato dalla luminanza relativa dei due colori, (L1 + 0,05) /(L2 + 0,05) Un materiale di riempimento in vetro si compone sullo sfondo: ogni canale diventa alfa per il materiale di riempimento più (1 meno alfa) per lo sfondo Sfocatura media dei pixel vicini ma lascia una regione's colore medio all'incirca dove si trovava, quindi su una vasta area di un colore il composito è una stima equa.

Riempire	Colore dello sfondo	Colore composito	Contrasto con testo bianco
Glassato, bianco a 0,2	Blu #60A5FA	circa rgb(128, 183, 251)	circa 2,1:1
Glassato, bianco a 0,2	Giallo #FBBF24	circa rgb(252, 204, 80)	circa 1,5:1
Buio, rgba(15, 23, 42, 0.25)	Blu #60A5FA	circa rgb(76, 130, 198)	circa 4.0:1

Prendi la prima riga Il rosso è 0,2 x 255 + 0,8 x 96 = 127,8, il verde è 0,2 x 255 + 0,8 x 165 = 183, il blu è 0,2 x 255 + 0,8 x 250 = 251. Quel colore's la luminanza relativa funziona vicino a 0,454 e il bianco's è 1, quindi il rapporto è 1,05/0,504, circa 2,1:1. Lo stesso pannello sulla parte gialla dello sfondo scende a circa 1,5:1. Nessuno dei due passa per il corpo del testo e il preimpostazione Scuro sul blu raggiunge circa 4,0:1: sufficiente per il testo di grandi dimensioni, ancora inferiore a 4,5:1 per il testo di piccole dimensioni.

Le correzioni pratiche, in ordine di efficacia:

• Alza l'alfa di riempimento. Spostando Trasparenza dal 20% al 40% si nasconde più sfondo e si restringe la gamma che il contrasto oscilla attraverso.
• Scurire la tinta per testo leggero, o schiarirlo per testo scuro Il vetro scuro con testo bianco regge su molti più sfondi rispetto al vetro bianco con testo bianco.
• Aumenta la sfocatura. Smussa i dettagli ad alto contrasto, quindi una sottile linea bianca dietro una lettera non la taglia.
• Aggiungere un'ombra di testo come ultima risorsa per le rubriche Il generatore di ombre di testo fa uno morbido rapidamente.
• Prova agli estremi. Controlla il contrasto sulle regioni più luminose e scure su cui il pannello può sedersi, con il controllore di contrasto colore, non in un punto conveniente.

Il generatore's copiato CSS copre solo la superficie di vetro Il testo bianco nella sua anteprima non fa parte dell'output, quindi impostato color sul tuo elemento tu stesso.

Il filtro di sfondo danneggia le prestazioni?

Può Una sfocatura dello sfondo costringe il browser a leggere i pixel dietro l'elemento e a eseguire una sfocatura su di essi ogni volta che quell'area cambia Su una scheda statica che è economica Su una vasta area, durante lo scorrimento o quando il contenuto si anima dietro il pannello, è uno degli effetti più costosi da comporre, e i telefoni con potenza inferiore lo mostrano prima come fotogrammi caduti.

Linee guida che lo tengono sotto controllo:

• Mantenere i pannelli di vetro di dimensioni modeste Una sovrapposizione smerigliata full-viewport costa molto più di una carta.
• Preferisci raggi di sfocatura più piccoli Il costo cresce con il raggio, e oltre circa 20 px la differenza visiva è piccola.
• Evitare di animare il valore di sfocatura stesso Animare opacity oppure transform del pannello invece.
• Fai attenzione alle intestazioni appiccicose su contenuti a scorrimento lungo, che si ri-sfocano su ogni fotogramma di scorrimento Prova su un telefono di fascia media reale.

Come si aggiunge un fallback per i browser o gli utenti che ne hanno bisogno?

Le versioni attuali di Chrome, Edge, Firefox e Safari supportano tutte backdrop-filter. I browser molto vecchi lo ignorano e mostrano il riempimento semitrasparente senza la sfocatura, che a basso alfa può lasciare testo su uno sfondo occupato Due piccole aggiunte fanno sì che l'effetto si degradi bene Puoi controllare la tabella di supporto corrente su MDN's pagina del filtro di sfondo.

.glass {
  /* Fallback: a more solid fill for browsers without backdrop-filter */
  background: rgba(255, 255, 255, 0.7);
  border-radius: 16px;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .glass {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

la @supports block applica solo la versione traslucida dove esiste la sfocatura Il prefers-reduced-transparency caratteristica multimediale, definita in Interrogazioni multimediali Livello 5, consente agli utenti che hanno chiesto al proprio sistema operativo meno trasparenza di ottenere un pannello solido Il supporto del browser per quella funzionalità multimediale è ancora parziale, quindi trattalo come un miglioramento ove disponibile piuttosto che come l'unica salvaguardia.

Morfismo del vetro vs neumorfismo vs design piatto

Il glassmorfismo è uno dei numerosi stili di superficie e ciascuno ha un costo diverso.

Stile	Come è fatta la superficie	Css principale	potenza	Rischio principale
Glassmorfismo	Riempimento traslucido più sfocatura dello sfondo	background con alfa, backdrop-filter	Profondità e contesto dallo sfondo	Il contrasto varia, la sfocatura costa le prestazioni
Neumorfismo	Stesso colore della pagina, alzato o premuto da ombre accoppiate	Due box-shadow strati	Controlli morbidi e tattili	Contrasto molto basso tra controllo e pagina
Piatto	Riempimenti solidi, nessuna profondità	background	Veloce e prevedibile	Può sembrare semplice
Elevazione in stile materiale	Riempimento solido con livelli di profondità dell'ombra	box-shadow	Gerarchia chiara	Meno atmosferica

Se il look morbido ed estruso è più vicino a quello che vuoi, il generatore neumorfismo costruisce le ombre accoppiate Molte interfacce mescolano gli stili: vetro per una barra di navigazione fluttuante sopra un'immagine dell'eroe, carte piatte per contenuti densi sotto di essa.

Come costruire una carta di vetro, iniziare a finire

1. Apri il generatore CSS in vetro smerigliato e scegli il preset più vicino al tuo sfondo: Scuro per foto chiare, Smerigliato o Leggero per pendenze colorate.
2. Imposta Sfocatura abbastanza in alto da non far competere il dettaglio dello sfondo con il testo, di solito da 8 a 16 px.
3. Imposta Trasparenza Inizia dal 20% e alzalo fino a quando il tuo testo non passa il contrasto sulla parte più dura dello sfondo.
4. Scegli una tinta con il selettore di colori Una tinta disegnata dallo sfondo's propria tavolozza sembra più naturale di bianco puro.
5. Regola Raggio per abbinarlo al resto dei tuoi componenti e mantieni Border su per sfondi scuri.
6. Fai clic su Copia CSS e incolla il blocco sulla classe della tua carta Aggiungi color e imbottirsi.
7. Avvolgere il blocco nel @supports fallback sopra se supporti i browser più vecchi.

Tutto nel generatore viene eseguito nel browser, quindi non viene caricato nulla e continua a funzionare offline dopo il caricamento della pagina Per gli strumenti relativi a superficie ed effetti, il Hub degli strumenti CSS elenca gradienti, ombre, filtri e transizioni in un unico posto.