# Gradienti radiali: il riflettore che guida lo sguardo [Canonical HTML page](https://gradiently.design/it/guide/radial-gradient) Un gradiente radiale è quanto di più vicino ci sia, nel design, a puntare una luce su qualcosa. Ecco come orientarlo, dimensionarlo ed evitare che sembri un bersaglio. ## The short version - Un gradiente radiale fonde il colore da un punto centrale verso l’esterno in cerchi o ellissi, invece che lungo una linea retta. - Poiché l’occhio va all’area più luminosa, un gradiente radiale funziona come un riflettore che dice alle persone dove guardare per prima cosa. - I gradienti radiali più utili sono posizionati fuori centro, dietro il soggetto o in parte fuori dall’inquadratura, non esattamente nel mezzo. - Un’ellisse segue la forma del suo contenitore, mentre un cerchio mantiene le sue proporzioni, e questo conta nei formati alti e larghi. - I bagliori radiali scuri fanno facilmente banding, quindi lasciagli spazio per sfumare e aggiungi un po’ di grana. Un **gradiente radiale** è una sfumatura che si espande da un unico punto, ad anelli, invece di procedere in una sola direzione. Il centro ha un colore e ogni anello si sposta verso il successivo. Poiché i nostri occhi vanno per prima cosa all’area più luminosa e satura di un’immagine, un gradiente radiale agisce come un riflettore: decidi dove cade l’attenzione, poi ci metti il titolo, il prodotto o il volto. Questa guida parla dell’uso dei gradienti radiali nel design. Per la sintassi completa, leggi [CSS radial-gradient()](https://gradiently.design/it/guide/css-radial-gradient); per il confronto con lineari, conici e mesh, leggi [tipi di gradienti](https://gradiently.design/it/guide/types-of-gradients). ## Cosa fa un gradiente radiale a un layout Un gradiente lineare suggerisce una direzione: luce dall’alto, un orizzonte, un’onda. Un gradiente radiale suggerisce una sorgente. Quella sorgente diventa il punto focale naturale, quindi tutto ciò che ci metti sopra sembra voluto e tutto ciò che sta ai bordi sembra secondario. È uno dei modi più semplici per costruire una [gerarchia visiva](https://gradiently.design/it/guide/visual-hierarchy) senza aggiungere una sola forma. Riflettore: `radial-gradient(circle at 50% 38%, #fde68a 0%, #f59e0b 14%, #7c2d12 42%, #1c0a05 78%)` Una pozza di luce calda su un fondo quasi nero. L’occhio cade sul centro luminoso prima che su qualsiasi altra cosa. ## Cerchio o ellisse In CSS un gradiente radiale è per impostazione predefinita un’ellisse, stirata sulle proporzioni del suo riquadro. Su un banner largo significa un bagliore piatto e largo; su una storia alta diventa un ovale alto. Un cerchio mantiene la stessa forma a qualsiasi dimensione, e si legge più come una vera sorgente di luce. - Ellisse: segue il riquadro: `radial-gradient(ellipse at center, #a78bfa 0%, #4c1d95 45%, #0f0a1f 100%)` - Cerchio: mantiene la forma: `radial-gradient(circle at center, #a78bfa 0%, #4c1d95 45%, #0f0a1f 100%)` Stessi colori e stessi punti. L’ellisse si allunga con il riquadro; il cerchio resta tondo. Usa un’ellisse quando vuoi che il bagliore riempia il formato in modo uniforme, come in una vignettatura. Usa un cerchio quando il gradiente deve sembrare una lampada, un sole o un alone dietro un singolo oggetto. ## Dove mettere il centro Un bagliore esattamente al centro di un quadrato è il gradiente radiale più comune e il meno interessante. Sembra un bersaglio. Spostare il centro cambia l’atmosfera dell’intero lavoro. - Centro: statico, simmetrico: `radial-gradient(circle at 50% 50%, #38bdf8 0%, #1e3a8a 40%, #020617 80%)` - In alto a sinistra: luce da una finestra: `radial-gradient(circle at 22% 18%, #38bdf8 0%, #1e3a8a 40%, #020617 80%)` - Sotto il bordo: un orizzonte che sale: `radial-gradient(circle at 50% 115%, #38bdf8 0%, #1e3a8a 45%, #020617 85%)` - In basso a destra: dietro un soggetto: `radial-gradient(circle at 85% 70%, #38bdf8 0%, #1e3a8a 38%, #020617 75%)` Quattro posizioni dello stesso gradiente. Cambia solo il punto centrale. - **Dietro il soggetto.** Metti il bagliore proprio dietro un prodotto o un ritratto, così si stacca dallo sfondo. - **Su un terzo.** Mettere la sorgente vicino a un terzo della larghezza o dell’altezza sembra equilibrato senza essere statico. - **Fuori dall’inquadratura.** Un centro sotto o accanto alla tela dà un morbido bordo di luce, come un’alba o una lampada appena fuori campo. - **Lontano dal testo.** Se il punto più luminoso sta sotto un testo bianco, il contrasto cala proprio dove ti serve di più. ## Quattro compiti che i gradienti radiali svolgono bene ### Riflettore e focus Un centro luminoso su un fondo scuro indica qualunque cosa ci stia sopra. Si adatta a foto prodotto, poster di eventi e [post di annuncio](https://gradiently.design/it/guide/announcement-post-design) in cui conta una sola cosa. ### Vignettatura Il contrario: un centro più chiaro che sfuma verso bordi più scuri. Una vignettatura leggera attira lo sguardo verso l’interno e fa sembrare fotografato uno sfondo piatto. Tieni il cambiamento piccolo, altrimenti sembra il filtro di una vecchia fotocamera. Vignettatura morbida su carta: `radial-gradient(ellipse at center, #f5efe6 0%, #efe4d3 55%, #cdb89a 100%)` Una vignettatura leggera su un tono carta caldo. Il centro resta libero per il testo; gli angoli si scuriscono con delicatezza. ### Bagliore e alone Un piccolo cerchio saturo che sfuma nel trasparente si legge come luce emessa da qualcosa: un’insegna al neon, uno schermo, un’icona. Sovrapponine due o tre in posizioni diverse e sei a metà strada da un [gradiente aurora](https://gradiently.design/it/guide/aurora-gradients). ### Campi di colore Sovrapponi diversi gradienti radiali con i bordi trasparenti e si fondono in un campo morbido e organico. È così che si simula la maggior parte dei [gradienti mesh in CSS](https://gradiently.design/it/guide/css-mesh-gradient). ```css .poster { background: radial-gradient(circle at 20% 25%, rgb(244 114 182 / 0.85) 0%, transparent 45%), radial-gradient(circle at 80% 30%, rgb(56 189 248 / 0.75) 0%, transparent 50%), radial-gradient(circle at 50% 95%, rgb(250 204 21 / 0.7) 0%, transparent 55%), #0f0a1f; } ``` Tre bagliori che sfumano nel trasparente su un fondo scuro. Il primo livello elencato sta sopra. ## Gradienti radiali con il testo Un poster verticale per un evento con un titolo sopra un’area luminosa dello sfondo Un poster in cui l’area illuminata sta dietro il titolo. Una storia verticale con una breve riga di testo in una parte calma e scura dello sfondo Una storia con il testo tenuto nel campo calmo e più scuro. Decidi quale dei due compiti ha il bagliore. O incornicia le parole, con testo scuro sul centro chiaro, o incornicia lo spazio accanto alle parole, con testo chiaro sul contorno scuro. I problemi iniziano quando il bordo del bagliore taglia una riga di testo, perché il contrasto cambia a metà. Il [testo su un gradiente](https://gradiently.design/it/guide/text-on-gradient) spiega meglio come trovare la zona calma. ## Problemi comuni dei gradienti radiali ### Da evitare - Un bagliore centrato in ogni design, come un bersaglio - Un anello netto dove due punti sono troppo vicini - Un bagliore scuro che sfuma su una distanza breve e fa banding - Un’ellisse stirata per sbaglio su un banner largo ### Da fare - Metti la sorgente dove starebbero il soggetto o la luce - Distanzia i punti così che la sfumatura sembri luce vera - Dai ai bagliori scuri una sfumatura lunga e un po’ di grana - Scegli di proposito cerchio o ellisse per ogni formato Il banding è quello da tenere d’occhio. Un bagliore dal blu notte al nero copre pochissimi livelli di colore su un’area ampia, quindi va a gradini. Lascia che la sfumatura si allunghi e aggiungi grana, come spiegato in [il banding nei gradienti](https://gradiently.design/it/guide/gradient-banding). ## FAQ ### Che cos’è un gradiente radiale? Un gradiente radiale fonde i colori da un punto centrale verso l’esterno in cerchi o ellissi, invece che lungo una linea retta come un gradiente lineare. ### Che differenza c’è tra un gradiente radiale a cerchio e uno a ellisse? Un’ellisse si allunga per seguire le proporzioni del suo contenitore, mentre un cerchio mantiene la stessa forma tonda a qualsiasi dimensione. In CSS l’impostazione predefinita è l’ellisse. ### Quando usare un gradiente radiale invece di uno lineare? Usa un gradiente radiale quando vuoi un punto focale, un bagliore o una vignettatura. Usa un gradiente lineare quando vuoi una direzione, come la luce dall’alto o un orizzonte. ### Perché il mio gradiente radiale sembra un bersaglio? Probabilmente è centrato e ha i punti troppo vicini. Sposta il centro fuori dal mezzo o fuori dall’inquadratura, e distanzia i punti così che la luce sfumi gradualmente.