Effetto Neon Glow Parametrico in Webflow

Ricrea l’effetto neon glow retro che una volta illuminava il sito di Webflow — quel contorno morbido e luminoso che fa sembrare viva una card all’hover — come un sistema completamente parametrico in Webflow. Invece di scegliere a mano cinque colori e impilare box shadow a occhio, definisci un colore base e lasci che le variabili CSS e la funzione color-mix() generino per te ogni layer del glow.

È proprio questa scelta che rende utile costruirlo nel modo “difficile”. Dato che ogni colore del glow deriva dal base, testare un’intera nuova palette — rosa, oro, verde, rosso — richiede una trentina di secondi: cambi un valore e tutto ciò che ne dipende si aggiorna da solo. Aggiungi sopra i variable modes e le varianti di componente di Webflow e puoi cambiare interi temi di colore card per card con un click, senza il caos delle combo class.

Il risultato è pulito, riutilizzabile e scalabile — un design system che sta benissimo in qualsiasi colore e resta banale da mantenere.

Come funziona

Il glow vive interamente sulla card, e il trucco è che è pre-cablato ma invisibile. Nello stato base la card ha un bordo trasparente e sei box shadow — tre interni, tre esterni — tutti con gli offset a zero e il colore impostato su trasparente. Sono completamente spenti. Due transizioni (una per il box-shadow, una per il border-color, entrambe di 300ms su una curva cubic ease-out) fanno sì che l’intero effetto sia in realtà solo quelle ombre e il bordo che sfumano da trasparente a colore all’hover. Non compare né sparisce nulla; i valori semplicemente si animano.

I colori arrivano da una collezione di variabili (rinominata “Neon collection” nella demo) costruita attorno a un’unica variabile indipendente, neon/base — un viola bluastro per iniziare. Ecco l’idea chiave che in tanti si perdono: neon/base non viene mai assegnata a nessuna proprietà CSS. Esiste solo come sorgente. Ogni altra variabile è derivata da lei con color-mix(): neon/strong tiene il 96% del base (un colore vivido per le ombre più nette al bordo), neon/mid tiene il 30% (più morbido, per le ombre di media profondità), neon/soft tiene il 20% (una tinta tenue e ariosa per le ombre più larghe e atmosferiche) e neon/border mescola il base con circa il 15% di bianco così il bordo risulta un filo più chiaro del glow.

color-mix() mescola due colori in uno spazio colore che indichi tu. Lo schema è color-mix(in <spazio>, <colore1> <percentuale>, <colore2>). Questo setup usa OKLCH, che è percettivamente uniforme — passi numerici uguali sembrano ugualmente graduali all’occhio, così i layer del glow sfumano in modo naturale. Nota che indichi una sola percentuale: dici al browser di tenere il 96% del base mescolato con transparent e lui deduce che il restante 4% viene da quel secondo colore trasparente. Non serve scriverli entrambi.

Il vero guadagno sta nelle ultime due feature. Un variable mode è un preset salvato delle stesse variabili con valori diversi — crei un mode chiamato “pink”, cambi neon/base in rosa acceso e, dato che tutto deriva dal base, tutti i layer del glow si ricalcolano gratis. Una sfumatura importante: assegnare un mode a un elemento lo imposta in realtà per la classe di quell’elemento, quindi ogni elemento che condivide quella classe si aggiorna insieme. Per variare il colore card per card, usi le combo class (veloce, ma poco elegante) oppure — il modo scalabile — trasformi la card in un componente, crei una variante per ogni mode e scegli il colore dal menu a tendina delle varianti su ciascuna istanza.

Come si usa

1. Clona il progetto. Prendi il cloneable Webflow — arriva con il layout completo della card, la Neon collection, tutti i mode e le varianti di componente già impostati, così puoi smontarlo e vedere come si incastra il tutto.

2. Crea la variabile base. Apri il pannello variabili (premi V) e in una collezione colore aggiungi una variabile colore chiamata neon/base. Lo slash la mette in un gruppo neon. Dagli una tinta di partenza qualsiasi — la demo usa un viola bluastro. Questa non la assegnerai mai direttamente a una proprietà.

3. Deriva i colori del glow con color-mix(). Aggiungi altre quattro variabili colore nello stesso gruppo e imposta ognuna con color-mix() nello spazio OKLCH, mescolando neon/base con transparent: neon/strong al 96%, neon/mid al 30%, neon/soft al 20%. Per neon/border, mescola invece il base con il bianco a circa il 15%.

4. Cabla lo stato hover. Lascia intatto lo stato base. Nello stato hover della card, imposta il colore del bordo su neon/border, poi imposta i sei box shadow sulle variabili — le ombre nette al bordo usano neon/strong, quelle di media profondità usano neon/mid, e quelle larghe e diffuse usano neon/soft. Dato che lo stato base ha già ombre trasparenti e le transizioni, il glow ora compare in dissolvenza all’hover.

5. Aggiungi temi colore come mode. Torna nel pannello variabili, clicca nuovo mode, dagli un nome (pink, gold, green, red…), lascia il tipo su manual e cambia solo neon/base. Ogni colore derivato si aggiorna in automatico per quel mode.

6. Applica i mode card per card con le varianti. Trasforma la card in un componente (Cmd/Ctrl + Shift + A). In modalità modifica componente, aggiungi una variante per ogni mode e assegna a ciascuna il suo variable mode. Esci dalla modifica, poi usa il menu a tendina variante nel pannello proprietà per dare a ogni istanza il suo colore di glow.