# Gradiente radiale in CSS: forme, dimensioni e posizioni

[Canonical HTML page](https://gradiently.design/it/guide/css-radial-gradient)

radial-gradient() disegna il colore verso l’esterno a partire da un punto. Ecco ogni sua parte, con esempi dal vivo, più i trucchi di sovrapposizione dietro bagliori morbidi, fari e vignettature.

## The short version

- 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.

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.

Bagliore ambra, tutto predefinito: `radial-gradient(#fef3c7, #f59e0b 45%, #78350f)`

Un’ellisse, centrata, dimensionata sull’angolo più lontano. È ciò che ottieni quando indichi solo i colori.

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](https://gradiently.design/it/guide/css-mesh-gradient). Per il lato progettuale delle sfumature radiali, vedi la guida gemella sui [gradienti radiali](https://gradiently.design/it/guide/radial-gradient).

## La sintassi di radial-gradient()

```css
/* 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)
```

Forma e dimensione possono venire in qualsiasi ordine. La posizione segue sempre la parola at.

| 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 |

Le parti di radial-gradient(). Solo i punti di colore sono 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()](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/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.

- Ellisse: segue il riquadro: `radial-gradient(ellipse, #a7f3d0, #059669 50%, #022c22)`
- Cerchio: resta tondo: `radial-gradient(circle, #a7f3d0, #059669 50%, #022c22)`

Gli stessi punti dalla menta al verde bosco. Su un riquadro largo, l’ellisse si allarga di lato e il cerchio no.

## 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%`.

- closest-side: `radial-gradient(circle closest-side at 30% 40%, #fde047, #ea580c 70%, #1c1917)`
- closest-corner: `radial-gradient(circle closest-corner at 30% 40%, #fde047, #ea580c 70%, #1c1917)`
- farthest-side: `radial-gradient(circle farthest-side at 30% 40%, #fde047, #ea580c 70%, #1c1917)`
- farthest-corner: `radial-gradient(circle farthest-corner at 30% 40%, #fde047, #ea580c 70%, #1c1917)`

Un sole, quattro dimensioni. closest-side finisce al bordo più vicino; farthest-corner, il predefinito, raggiunge l’angolo più lontano.

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.

- at top left: `radial-gradient(circle at top left, #c4b5fd, #6d28d9 45%, #1e1b4b)`
- at 50% 120%: orizzonte: `radial-gradient(ellipse at 50% 120%, #fb7185, #9f1239 45%, #0f0a1e 75%)`
- at 80% 20%: `radial-gradient(circle at 80% 20%, #7dd3fc, #0369a1 35%, #082f49)`

Spostare il centro cambia l’atmosfera più di quanto faccia cambiare i colori.

## 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.

```css
.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%);
}
```

Tre pozze di viola, rosa e azzurro cielo su uno sfondo quasi nero. Cambia una posizione e l’intera composizione si sposta.

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`.

> **I bagliori morbidi fanno banding facilmente** Le grandi dissolvenze radiali a basso contrasto su sfondi scuri sono dove i gradini si vedono per primi. Un debole strato di rumore in cima li nasconde; vedi la [texture di rumore in CSS](https://gradiently.design/it/guide/css-noise-texture) e il [banding nei gradienti](https://gradiently.design/it/guide/gradient-banding).

## 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](https://gradiently.design/it/guide/css-patterns) ne ha altre.

- Anelli blu notte: `repeating-radial-gradient(circle at 50% 50%, #0f172a 0 10px, #1e3a8a 10px 20px)`
- Onde dall’angolo: `repeating-radial-gradient(circle at 0 100%, #fef3c7 0 6px, #f59e0b 6px 9px, #fef3c7 9px 18px)`

Punti netti a lunghezze fisse trasformano un gradiente radiale in anelli.

### 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

## FAQ

### 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.