In breve
- Un effetto glow è un nucleo luminoso di colore che sfuma gradualmente in un intorno più scuro, così si legge come luce e non come vernice.
- I glow funzionano meglio su forme, pulsanti, foto di prodotto e sfondi, dove aggiungono profondità e guidano lo sguardo.
- Un alone di glow attorno al testo sfoca i bordi delle lettere e le rende più difficili da leggere, quindi tieni le parole nitide e metti la luce altrove.
- In CSS un glow morbido è di solito un gradiente radiale che sfuma verso il trasparente o un box shadow con grande sfocatura e nessuno scostamento.
- Un glow ha bisogno di un fondo scuro o spento per vedersi, e un po’ di grana impedisce che la sua lunga dissolvenza formi bande.
In questa pagina
Un effetto glow è una macchia di luce: un nucleo luminoso di colore che sfuma lentamente in un intorno più scuro, come se una lampada fosse appena dietro la superficie. Usato bene, dà profondità a un design piatto e porta lo sguardo su un prodotto, un pulsante o una forma. Usato male, diventa un anello sfocato attorno al titolo. La regola che segue tutta questa pagina è semplice: metti il glow su forme e sfondi, e tieni le parole nitide.
Dove un glow sta bene e dove no
La luce attorno a un oggetto dice che quell’oggetto conta. La luce attorno alle lettere fa un’altra cosa: ne ammorbidisce i bordi, abbassa il contrasto tra tratto e sfondo e fa sembrare la riga fuori fuoco sugli schermi piccoli. Per questo il glow deve stare vicino alle parole, mai avvolgerle. Se il testo ha bisogno di aiuto per leggersi, sistema l’area dietro di lui; le alternative a text shadow raccolgono le soluzioni più pulite.
Da evitare
- Un alone sfocato che abbraccia il titolo
- Un glow dello stesso colore del testo
- Più glow di pari forza in competizione
- Un glow chiaro su uno sfondo chiaro
- Un glow su ogni pulsante, scheda e icona
Da fare
- Luce dietro un prodotto, una forma o una foto
- Un glow su un lato, con le parole sull’area calma
- Una luce principale e al massimo un’eco più debole
- Un fondo scuro o spento, perché la luce abbia spazio
- Il glow riservato all’unica cosa che conta
Sfondi glow con i codici
Lo sfondo luminoso più semplice è un gradiente radiale che parte chiaro, scende in fretta attraverso un tono medio più ricco e sfuma in un fondo quasi nero. Spostare il centro fuori dalla metà lo fa sembrare una sorgente di luce e non un bersaglio.
Ognuno ha tre parti: un nucleo vicino al bianco o molto pallido, un passaggio intermedio saturo e un fondo profondo della stessa famiglia. Salta il passaggio intermedio e il glow appare grigio dove incontra il buio, il problema descritto in gradienti sporchi. Per saperne di più sulla forma stessa, vedi i gradienti radiali.
Come creare un glow che sembri luce vera
- 1
Parti da un fondo scuro o spento
La luce ha bisogno del buio per vedersi. Vanno bene un nero bluastro, un verde profondo o un tono carta polveroso; un fondo bianco acceso non lascia al glow nessuno spazio.
- 2
Dai al nucleo una tinta più chiara e calda
La luce vera è più intensa e meno satura al centro. Fai del nucleo una versione pallida del colore del glow, come
#fde68aper un glow arancione. - 3
Lascialo calare lentamente
La dissolvenza deve correre su un’area ampia, spesso metà dell’inquadratura. Una dissolvenza corta sembra un faro ritagliato con le forbici.
- 4
Decidi da dove viene la luce
Metti il nucleo vicino a un bordo o a un angolo, o dietro l’oggetto che illumina. Poi mantieni coerente con quella direzione il resto del design.
- 5
Aggiungi una grana fine
Le lunghe dissolvenze scure sono dove il banding si nota di più. Uno strato di rumore leggero nasconde i gradini; i gradienti granulosi spiegano il metodo.
Un’altra prova: spegni il glow e guarda di nuovo. Se il design funziona ancora, il glow aggiunge atmosfera. Se crolla, il glow sta facendo un lavoro che dovrebbero fare impaginazione o contrasto.
Effetto glow in CSS
Sul web ci sono tre modi affidabili per creare un glow. Un box-shadow con scostamento zero e grande sfocatura illumina i bordi di una scheda o di un pulsante. Un gradiente radiale su uno pseudo elemento mette una morbida pozza di luce dietro un oggetto. E filter: blur() su una forma colorata dà il risultato più morbido, con un costo di rendering più alto. Il riferimento MDN su box-shadow elenca ogni valore.
/* 1. A button that glows at its edges */
.button-glow {
background: #7c3aed;
color: #ffffff;
box-shadow:
0 0 0 1px rgb(196 181 253 / 0.4),
0 0 24px rgb(124 58 237 / 0.55),
0 0 64px rgb(124 58 237 / 0.25);
}
/* 2. A pool of light behind a product image */
.product {
position: relative;
isolation: isolate;
}
.product::before {
content: "";
position: absolute;
inset: -20%;
z-index: -1;
background: radial-gradient(circle at 50% 55%, rgb(253 230 138 / 0.9), rgb(249 115 22 / 0.35) 35%, transparent 70%);
}
/* 3. A blurred orb in a hero background */
.orb {
position: absolute;
width: 480px;
aspect-ratio: 1;
border-radius: 50%;
background: #0891b2;
filter: blur(120px);
opacity: 0.6;
pointer-events: none;
}box-shadowIdeale per
Costo
Attenzione a
overflow: hidden su un elemento padreradial-gradientIdeale per
Costo
Attenzione a
filter: blur()Ideale per
Costo
Attenzione a
Sui pulsanti tieni il glow sottile e l’etichetta nitida: la luce appartiene alla forma del pulsante, non alle sue parole. La sintassi completa delle ombre è in CSS box shadow.
Glow in post, manifesti e storie
In un design fisso, un glow dà il meglio dietro il soggetto o nella metà vuota dell’inquadratura. Metti la luce dove lo sguardo deve arrivare per primo, poi posa il titolo sulla parte più scura e calma del fondo. La luce guida chi legge fino alle parole senza toccarle.
La luce passa dritta attraverso il titolo: l’area più chiara cade sulle lettere e le appiattisce.
La stessa storia con la luce lontana dalle parole. Il glow crea comunque l’atmosfera e il testo resta nitido.
È esattamente ciò che fa da solo un Mark di Gradiently. La sua regione più calma si posa dietro le parole, i colori vicini alle lettere si approfondiscono o si alzano, e l’Inchiostro automatico sceglie testo chiaro o scuro riga per riga dalla palette del Mark, quindi non servono riquadri, ombre o aloni. Vedi l’idea in Inchiostro automatico.
Glow, neon e light leak a confronto
Questi tre si confondono. Un glow è luce morbida e ampia da una sola sorgente. I gradienti neon sono colore saturo ed elettrico con una sottile linea luminosa al centro, più vicini all’insegna. I light leak sono strisce calde che imitano la pellicola, di solito entrano da un bordo. Tutti e tre hanno bisogno di un fondo scuro e tutti e tre stanno lontani dal testo. Se vuoi che la luce si sposti e cambi, i gradienti aurora ne sono un parente in movimento.
Le domande più frequenti
Come si crea un effetto glow in CSS?
Usa un box-shadow senza scostamento e con grande sfocatura, come 0 0 24px in un colore semitrasparente, oppure un gradiente radiale che sfuma verso il trasparente dietro l’elemento. Per il glow più morbido, sfoca una forma colorata con filter: blur().
Devo mettere un glow attorno al testo?
No. Un alone ammorbidisce i bordi delle lettere e abbassa il contrasto, così le parole diventano più difficili da leggere. Tieni il testo nitido e metti il glow dietro una forma o nello sfondo vicino.
Quale sfondo fa risaltare un glow?
Un fondo scuro o spento della stessa famiglia di colore del glow, come un indaco profondo dietro una luce viola. Su uno sfondo bianco acceso un glow non ha spazio.
Perché il mio gradiente luminoso ha delle bande?
Le dissolvenze lunghe e scure hanno pochi passaggi di colore a disposizione, quindi gli schermi mostrano bande visibili. Aggiungi uno strato di grana fine o esporta a qualità più alta per nasconderle.
Che differenza c’è tra un glow e un effetto neon?
Un glow è luce ampia e morbida da una sola sorgente. Il neon è colore saturo con una linea sottile e intensamente luminosa al centro, come il tubo di un’insegna.
Scritto da Gradiently
Il team dietro Gradiently, uno strumento di design costruito attorno ai Mark: gradienti vivi che fanno sembrare tuo tutto ciò che progetti.
Vedi il nostro profilo