In breve
- Un gradiente radiale CSS diffonde il colore verso l’esterno a partire da un punto centrale, ed è scritto con la funzione radial-gradient() ovunque il CSS accetti un’immagine.
- Per impostazione predefinita un gradiente radiale è un’ellisse, centrata nel riquadro, dimensionata per raggiungere l’angolo più lontano.
- Le parole chiave di dimensione closest-side, closest-corner, farthest-side e farthest-corner decidono dove cade l’ultimo punto di colore.
- La parola chiave at sposta il centro, ad esempio at 20% 30%, e le posizioni funzionano come background-position.
- Sovrapporre più gradienti radiali che sfumano verso il trasparente è il modo standard di costruire bagliori morbidi e sfondi simili a mesh in CSS.
In questa pagina
Un gradiente radiale in CSS sfuma il colore verso l’esterno a partire da un punto, come la luce che si diffonde da una lampada. Lo scrivi con radial-gradient() e lo usi ovunque il CSS accetti un’immagine, di solito background-image. Senza opzioni disegna un’ellisse al centro del riquadro che raggiunge l’angolo più lontano: radial-gradient(#fef3c7, #b45309) dà un centro pallido che si irradia in un ambra profondo.
radial-gradient(#fef3c7, #f59e0b 45%, #78350f)Tutto il resto della funzione cambia una di tre cose: la forma, la dimensione e la posizione. Una volta che le controlli, la stessa funzione disegna bagliori, fari, vignettature, raggiere e le pozze di colore dietro un gradiente mesh in CSS. Per il lato progettuale delle sfumature radiali, vedi la guida gemella sui gradienti radiali.
La sintassi di radial-gradient()
/* shape size position stops */
radial-gradient(circle closest-side at 30% 40%, #fde047, #ea580c 60%, #1c1917)
/* everything before the first comma is optional */
radial-gradient(#fde047, #ea580c)| Parte | Valori | Predefinito |
|---|---|---|
| Forma | circle o ellipse | ellipse |
| Dimensione | una parola chiave, una lunghezza per un cerchio, o due lunghezze o percentuali per un’ellisse | farthest-corner |
| Posizione | at seguito da qualsiasi cosa accetti background-position | at center |
| Interpolazione | in oklab, in oklch e altri spazi colore | sRGB per i colori esadecimali |
| Punti di colore | due o più colori con posizioni facoltative | obbligatori |
Una regola mette in difficoltà: la dimensione di un cerchio deve essere una lunghezza come 200px, mai una percentuale, perché la percentuale di un rettangolo non ha un raggio unico. Le ellissi accettano percentuali, come in ellipse 60% 40%. Il riferimento MDN su radial-gradient() elenca la grammatica completa.
Cerchio contro ellisse
Un’ellisse si allunga con il riquadro, quindi su un banner largo il bagliore è largo e su una storia alta è alto. Un cerchio resta tondo qualunque cosa faccia il riquadro. Usa le ellissi per sfondi che devono riempire il contenitore in modo uniforme, e i cerchi per tutto ciò che deve leggersi come una fonte di luce, un pianeta o il bagliore di un pulsante.
Parole chiave di dimensione: da closest-side a farthest-corner
La dimensione decide dove cade l’ultimo punto di colore, cioè dove sta la forma finale del gradiente. Le quattro parole chiave misurano dal centro al lato o all’angolo più vicino o più lontano del riquadro. Sembrano diverse solo quando il centro è fuori centro, quindi gli esempi qui sotto partono tutti da 30% 40%.
In pratica, closest-side si adatta a forme contenute come pallini e badge, perché il colore non esce mai dal bordo più vicino. farthest-corner si adatta agli sfondi, perché la sfumatura copre l’intero riquadro. Quando serve un controllo esatto, indica una lunghezza: circle 180px at 50% 0 è un bagliore di 180 pixel appeso al bordo superiore.
Posizionare con at
La parola chiave at colloca il centro con gli stessi valori di background-position: parole chiave come at top right, percentuali come at 20% 80% o lunghezze come at 40px 60px. Il centro può perfino stare fuori dal riquadro, come in at 50% 120%, che dà un bagliore d’orizzonte che sale da sotto il bordo inferiore.
Bagliori radiali a livelli
Lo schema radiale più utile è avere più gradienti sovrapposti in un solo background-image, ciascuno che sfuma verso transparent, su un colore scuro piatto. Ogni livello è una pozza di luce nel suo posto. Poiché il primo livello viene dipinto in cima, metti per primo il bagliore più luminoso e più piccolo.
.glow {
background-color: #0b0a1a;
background-image:
radial-gradient(circle at 20% 25%, rgb(124 58 237 / 0.55), transparent 45%),
radial-gradient(circle at 80% 30%, rgb(236 72 153 / 0.45), transparent 40%),
radial-gradient(ellipse at 50% 110%, rgb(56 189 248 / 0.4), transparent 60%);
}Altri due schemi coprono la maggior parte dei compiti rimasti. Una vignettatura scurisce i bordi: radial-gradient(ellipse, transparent 55%, rgb(0 0 0 / 0.55)) sovrapposta a una foto. Un faro segue il puntatore quando ne alimenti la posizione da proprietà personalizzate, come radial-gradient(circle 240px at var(--x) var(--y), rgb(255 255 255 / 0.15), transparent), con poche righe di JavaScript che impostano --x e --y su pointermove.
Gradienti radiali ripetuti
repeating-radial-gradient() ripete i suoi punti verso l’esterno finché il riquadro non è pieno, quindi una coppia di punti netti diventa anelli. Usa lunghezze per le posizioni dei punti così la larghezza dell’anello resta costante. È la base di onde, bersagli e texture simili a mezzetinte, e la guida ai motivi CSS ne ha altre.
Da evitare
- Percentuali per la dimensione di un cerchio, che non sono valide
- Bagliori luminosi che finiscono con un bordo netto perché l’ultimo punto è opaco
- Centrare ogni bagliore a 50% 50%
- Cinque bagliori sovrapposti della stessa intensità
Da fare
- Lunghezze per i cerchi, percentuali per le ellissi
- Sfumare ogni bagliore verso
transparent - Collocare i bagliori fuori centro, vicino agli angoli o sotto il bordo
- Un bagliore dominante e uno o due più quieti
Le domande più frequenti
Come creo un gradiente circolare in CSS?
Usa radial-gradient(circle, colore1, colore2). Aggiungere circle mantiene la forma tonda; senza di esso ottieni un’ellisse che si allunga con il riquadro.
Come sposto il centro di un gradiente radiale?
Aggiungi at e una posizione dopo forma e dimensione, ad esempio radial-gradient(circle at 20% 30%, #c4b5fd, #1e1b4b). Le posizioni funzionano come background-position.
Cosa significa farthest-corner?
Dimensiona il gradiente in modo che il suo ultimo punto di colore raggiunga l’angolo del riquadro più lontano dal centro. È la dimensione predefinita.
Un gradiente radiale circolare può usare una dimensione in percentuale?
No. Un cerchio richiede una sola lunghezza come 200px. Le ellissi possono usare due percentuali, come ellipse 60% 40%.
Come creo un effetto bagliore con i gradienti CSS?
Sovrapponi uno o più valori radial-gradient() che sfumano da un colore semitrasparente a transparent, su un background-color scuro.
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
