Effetti con filtri SVG in Webflow
Ricrea in Webflow effetti di vetro, rifrazione e luce in stile Apple con i filtri SVG — displacement map, turbolenza e sfocatura, tutto no-code e incollato una volta sola.
I filtri SVG sono la cosa più vicina alla vera magia ottica che Webflow abbia. Definisci un filtro una volta, lo richiami tramite ID, e puoi deformare, rifrangere e sfocare qualunque cosa stia dietro un elemento — il trucco dietro ogni effetto “liquid glass” convincente che hai visto ultimamente.
Questo corso breve raccoglie le build che sfruttano quella potenza: una navbar di vetro ispirata ad Apple, un bottone di vetro con hover in GSAP e un’animazione con spotlight e prisma. Ognuna arriva con un cloneable e una spiegazione onesta delle primitive dei filtri — displacement map, turbolenza, sfocatura gaussiana — così l’effetto smette di sembrare una scatola nera e diventa qualcosa che puoi regolare.
Il percorso del corso
-
Navbar Liquid Glass di Apple in Webflow (No Code)
Ricrea la navbar liquid glass di Apple in Webflow con div sovrapposti e un piccolo filtro SVG — senza librerie esterne e senza codice pesante, solo elementi nativi.
-
Bottone di Vetro con Filtri SVG e GSAP in Webflow
Crea in Webflow un bottone di cristallo che rifrange la pagina dietro di sé con un filtro SVG e, all'hover, passa da vetro morbido a ghiaccio nitido con GSAP.
-
Effetto Spotlight in Webflow con Filtro Prisma GSAP
Crea uno spotlight che segue il cursore in Webflow con un overlay a gradiente radiale, poi aggiungi un filtro prisma SVG animato con GSAP per un glow premium.