Navbar Liquid Glass di Apple in Webflow (No Code)

Ricrea la splendida navbar liquid glass di Apple direttamente dentro Webflow — quella barra liscia, smerigliata e leggermente liquida che distorce tutto ciò che scorre sotto. Nessuna libreria esterna, niente codice pesante: solo elementi nativi di Webflow, un piccolo filtro SVG e un po’ di layering intelligente.

Il trucco è che il “vetro” non è una singola proprietà da accendere. Sono pochi layer semplici che fanno piccoli lavori — un blur, una tinta, uno shine — impilati così da leggersi come un’unica superficie curata. Una volta che vedi come si incastrano i pezzi, puoi regolare tutto a piacere, dal frost appena percettibile alla rifrazione piena stile Apple.

Come funziona

Parti preparando la navbar stessa. Rendila sticky con un offset top, portala sopra ogni cosa con uno z-index alto, e non lasciarle occupare tutta la larghezza — una larghezza calc(100% - 2rem) con margin-left: auto e margin-right: auto la centra lasciando un po’ di respiro su entrambi i lati. Un border-radius generoso (pensa a 50rem) ti dà angoli arrotondati a pillola indipendentemente dall’altezza della navbar. Due box shadow leggere sulla navbar — una soft drop shadow e una più ampia e sbiadita — la fanno sembrare sospesa leggermente sopra la pagina. Da sole quasi non le noti, ma vendono in silenzio la profondità una volta applicato il glass.

Il vetro vero e proprio sono tre layer in posizione assoluta messi dentro la navbar, ognuno impostato su “full” così copre tutta la barra, e ognuno piazzato prima del wrapper dei link della navbar così non blocca mai il menu:

• Layer glass effect — porta un piccolo backdrop-filter: blur (intorno a 3px) e, più avanti, il filtro SVG. È il layer che piega il contenuto dietro.
• Layer glass tint — un colore di sfondo piatto a bassa opacità (bianco al ~25% per iniziare; nel video poi diventa nero al ~60% per un look più solido e ancorato). È il velo smerigliato.
• Layer glass shine — due box shadow inset bianche simulano la luce che prende il bordo in alto a sinistra e l’angolo opposto, dando quel leggero bagliore interno. Ammorbidirle dal ~50% al ~30% di opacità evita che gli angoli sembrino troppo duri.

Un tranello: gli angoli arrotondati vivono sulla navbar, e i nuovi layer non li ereditano di default. Invece di riscrivere 50rem tre volte, imposta il border-radius di ogni layer su inherit (come valore custom) e il suo overflow su hidden. Ora ogni layer si ritaglia automaticamente sulla forma della navbar, anche se più avanti cambi il raggio.

La vera magia è il filtro SVG. Un semplice blur CSS ammorbidisce solo ciò che c’è dietro la barra; un filtro SVG di displacement in realtà lo distorce, così il contenuto in scroll si deforma in modo fluido e organico. Incolli il filtro dentro un elemento embed (dagli una classe, imposta display: none — non renderizza nulla, è solo una definizione da richiamare), poi lo applichi al layer glass effect con una proprietà CSS custom: filter: url(#glass-distortion), usando l’ID del filtro. Dentro il filtro, tre parametri fanno la regolazione: scale sul displacement map controlla l’intensità (150 è forte; 60–80 è più raffinato), base frequency sulla turbolenza definisce quanto è ondulato il rumore (0.01 è il default; ~0.015 è un pelo più liquido), e standard deviation sul Gaussian blur distribuisce la distorsione. Scale sposta di più l’ago, base frequency è la seconda. Una combinazione bilanciata e vicina ad Apple è base frequency 0.015, standard deviation 3 e scale 60.

Come si usa

1. Clona il progetto. Prendi il cloneable SVG glass effect — arriva con la navbar finita, la struttura dei layer e il codice esatto del filtro SVG (costruito sulla base Astral Fund Bank). Il markup del filtro sta già dentro l’embed lì, quindi non devi scriverlo da zero.

2. Prepara la navbar. Impostala su position: sticky, dalle un offset top e uno z-index alto, imposta la larghezza su calc(100% - 2rem) con margin-left/margin-right su auto, e aggiungi un border-radius grande per angoli completamente arrotondati.

3. Aggiungi profondità. Sulla navbar, aggiungi due box shadow esterne — una soft (circa Y offset 6px, blur 6px) e una più ampia e sbiadita (blur ~20px, nero al ~10%). Sono leggere di proposito.

4. Costruisci i tre layer. Dentro la navbar, aggiungi tre div block — glass effect, glass tint, glass shine — ognuno position: absolute, impostato su full e piazzato prima del wrapper dei link. Metti un piccolo backdrop blur sul layer effect, uno sfondo a bassa opacità sul layer tint, e due box shadow inset bianche sul layer shine.

5. Sistema gli angoli. Su tutti e tre i layer, imposta border-radius su inherit e overflow su hidden così si ritagliano sulla forma arrotondata della navbar.

6. Aggiungi e applica il filtro SVG. Metti un elemento embed dentro la navbar (prima del wrapper dei link), incolla il codice del filtro dal cloneable, dagli una classe e impostalo su display: none. Poi seleziona il layer glass effect, aggiungi una proprietà CSS custom filter con valore url(#glass-distortion) (fai combaciare l’ID del filtro), e scrolla — ora il contenuto sotto si distorce come vero vetro.

7. Metti a punto. Apri l’embed e regola il filtro: abbassa scale (prova 60–80) per una distorsione più delicata, sposta base frequency verso 0.015 per più onda, e lascia standard deviation intorno a 3. Poi rifinisci il look — ammorbidisci le ombre dello shine, porta il testo dei link a opacità piena per la leggibilità, e scurisci la tinta se vuoi che la barra sembri più solida.