In breve
- 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.
In questa pagina
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(); per il confronto con lineari, conici e mesh, leggi tipi di gradienti.
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 senza aggiungere una sola forma.
radial-gradient(circle at 50% 38%, #fde68a 0%, #f59e0b 14%, #7c2d12 42%, #1c0a05 78%)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.
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.
- 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 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.
radial-gradient(ellipse at center, #f5efe6 0%, #efe4d3 55%, #cdb89a 100%)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.
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.
.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;
}Gradienti radiali con il testo
Un poster in cui l’area illuminata sta dietro il titolo.
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 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.
Le domande più frequenti
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.
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
