# Effetto glow nel design: luce morbida, senza aloni sul testo [Canonical HTML page](https://gradiently.design/it/guide/glow-effect) Un glow deve sembrare luce che cade su una superficie: un nucleo luminoso, una lunga dissolvenza, una stanza buia intorno. Mettilo dietro le forme e dentro gli sfondi, lontano dai bordi delle lettere. ## The short version - 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. 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](https://gradiently.design/it/guide/text-shadow-alternatives) 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. - Glow di brace: `radial-gradient(circle at 70% 30%, #fde68a 0%, #f97316 18%, #7c2d12 42%, #120a06 75%)` - Luce di piscina: `radial-gradient(circle at 30% 70%, #a5f3fc 0%, #0891b2 20%, #083344 48%, #030b10 80%)` - Luce di palco dal basso: `radial-gradient(ellipse at 50% 100%, #f0abfc 0%, #a21caf 22%, #3b0764 50%, #0b0414 85%)` - Segnale lime: `radial-gradient(circle at 80% 20%, #d9f99d 0%, #4d7c0f 22%, #1a2e05 50%, #070b03 80%)` - Luce di finestra sulla carta: `radial-gradient(ellipse at 20% 15%, #fff7ed 0%, #fed7aa 20%, #f5e6d8 50%, #efe7df 85%)` - Lampada viola: `radial-gradient(circle at 75% 25%, #c4b5fd 0%, #6d28d9 16%, #1e1b4b 45%, #09071a 80%)` Cinque glow scuri e uno chiaro. La versione chiara funziona perché il glow è più caldo e luminoso di un fondo già pallido, non perché sia più forte. 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](https://gradiently.design/it/guide/muddy-gradients). Per saperne di più sulla forma stessa, vedi i [gradienti radiali](https://gradiently.design/it/guide/radial-gradient). ## 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 `#fde68a` per 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](https://gradiently.design/it/guide/grainy-gradients) 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](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow) elenca ogni valore. ```css /* 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; } ``` Tre glow, nessuno sul testo. Sovrapporre due o tre box shadow di forza decrescente dà un bordo più morbido di una sola ombra grande. | Metodo | Ideale per | Costo | Attenzione a | | --- | --- | --- | --- | | `box-shadow` | Pulsanti, schede, campi | Basso | Tagliato da `overflow: hidden` su un elemento padre | | Strato `radial-gradient` | Luce dietro immagini e sezioni | Basso | Banding sulle lunghe dissolvenze scure | | Forma con `filter: blur()` | Sfondi hero, sfere d’atmosfera | Più alto, soprattutto se animato | Costo di ridisegno durante lo scorrimento; tienila ferma o piccola | Scegli il metodo più economico che dà l’aspetto voluto. Gran parte dei glow in una pagina dovrebbero essere gradienti od ombre, non elementi sfocati. 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](https://gradiently.design/it/guide/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. Una storia verticale per un evento in cui una macchia chiara dello sfondo sta proprio dietro il titolo e lo sbiadisce La luce passa dritta attraverso il titolo: l’area più chiara cade sulle lettere e le appiattisce. La stessa storia verticale con il glow chiaro spostato lontano dal titolo e un’area scura e calma dietro il testo 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](https://gradiently.design/it/guide/auto-ink-legibility). - Fondo notte: #09071a - Indaco di sfumatura: #1e1b4b - Luce viola: #6d28d9 - Nucleo lilla: #c4b5fd - Accento caldo: #fde68a - Testo nitido: #f8fafc Una palette glow in quattro strati: fondo, sfumatura, luce e nucleo, più un accento caldo e un colore del testo che non prende mai il glow. ## Glow, neon e light leak a confronto Questi tre si confondono. Un glow è luce morbida e ampia da una sola sorgente. I [gradienti neon](https://gradiently.design/it/guide/neon-gradients) sono colore saturo ed elettrico con una sottile linea luminosa al centro, più vicini all’insegna. I [light leak](https://gradiently.design/it/guide/light-leaks) 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. ## FAQ ### 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.