# Color stop del gradiente: posizionare i colori per sfumature fluide

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

Due gradienti con gli stessi colori possono sembrare completamente diversi. La differenza sta in dove si trovano gli stop e in come la sfumatura viaggia tra l’uno e l’altro. È la parte del gradiente che quasi nessuno tocca.

## The short version

- I color stop di un gradiente sono i punti lungo il gradiente in cui si raggiunge un colore preciso, scritti come un colore seguito da una posizione, per esempio `#7c3aed 40%`.
- Gli stop senza posizione vengono distribuiti in modo uniforme, una scelta che raramente appare la più naturale.
- Un color hint è una percentuale isolata tra due stop che sposta il punto medio della loro sfumatura senza aggiungere un colore.
- Due stop nella stessa posizione creano un bordo netto, ed è così che in CSS si ottengono strisce e fasce decise.
- Aggiungere più stop intermedi che seguono una curva di easing elimina il bordo visibile dove una dissolvenza lineare inizia e finisce.

I **color stop del gradiente** sono i punti in cui un gradiente raggiunge un colore preciso. In CSS ogni stop è un colore con una posizione facoltativa, come `#7c3aed 40%`, e il browser sfuma in linea retta tra gli stop vicini. Dove li metti decide quasi tutto: se la sfumatura sembra fluida o brusca, se un colore domina, se l’occhio vede una giuntura nel punto in cui parte una dissolvenza. Spostare gli stop spesso migliora il risultato più che cambiare i colori.

## Come funzionano i color stop

La linea del gradiente va dallo 0 al 100 per cento. Ogni stop fissa un colore a un punto di quella linea. Se ometti le posizioni, il browser distribuisce gli stop in modo uniforme, quindi tre colori cadono a 0, 50 e 100 per cento. Tra ogni coppia il colore cambia a velocità costante. La sintassi completa è documentata nel [riferimento MDN di linear-gradient()](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient).

| Cosa scrivi | Cosa succede |
| --- | --- |
| `#1e3a8a, #f472b6` | Due stop a 0% e 100% |
| `#1e3a8a 20%, #f472b6 80%` | Blu navy pieno fino al 20%, sfumatura, rosa pieno dopo l’80% |
| `#1e3a8a, 30%, #f472b6` | Un color hint: il punto medio si sposta al 30% |
| `#1e3a8a 50%, #f472b6 50%` | Un bordo netto al centro, nessuna sfumatura |
| `#1e3a8a 0 40%, #f472b6 40% 100%` | Doppia posizione: due fasce piene |
| `#1e3a8a 10px, #f472b6 200px` | Le lunghezze funzionano come le percentuali |

La sintassi degli stop in CSS. Le stesse idee valgono in Figma, Photoshop e in ogni editor di gradienti, solo con i cursori.

## Perché gli stop equidistanti sembrano artificiali

La luce vera raramente cambia a ritmo costante. Un tramonto è quasi tutto di un solo colore, con una fascia stretta di cambiamento vicino all’orizzonte; un’ombra è per lo più un tono medio con un calo breve sul bordo. La distribuzione uniforme dà a ogni colore la stessa quota, e il risultato sembra un grafico. Decidi quale colore guida e lascia che occupi la maggior parte dello spazio.

- Uniforme: 0, 50, 100: `linear-gradient(180deg, #0c4a6e 0%, #f59e0b 50%, #be123c 100%)`
- Pesato: guida il blu: `linear-gradient(180deg, #0c4a6e 0%, #0e7490 58%, #f59e0b 84%, #be123c 100%)`
- Pesato: in alto i toni caldi: `linear-gradient(180deg, #0c4a6e 0%, #f59e0b 22%, #be123c 40%, #4c0519 100%)`

Una palette, tre posizionamenti. Le versioni pesate sembrano un cielo in due momenti diversi; quella uniforme sembra generata.

## Color hint: spostare il punto medio

Un color hint è una percentuale isolata posta tra due stop. Non aggiunge un colore: sposta il punto in cui la sfumatura è esattamente a metà. Un hint al 20 per cento significa che il colore raggiunge il suo punto medio presto, quindi il secondo colore arriva in fretta e poi si ferma a lungo. Gli hint sono il modo più economico per rendere meno meccanico un gradiente a due colori.

- Senza hint, punto medio al 50%: `linear-gradient(90deg, #4c1d95, #f9a8d4)`
- Hint al 25%: `linear-gradient(90deg, #4c1d95, 25%, #f9a8d4)`
- Hint al 75%: `linear-gradient(90deg, #4c1d95, 75%, #f9a8d4)`

Lo stesso viola verso il rosa. Spostando l’hint un colore prende il sopravvento, senza modificarne nessuno.

## Hard stop per strisce e fasce

Quando due stop condividono la posizione, non c’è distanza su cui sfumare, quindi il colore cambia all’istante. È così che si disegnano strisce, sfondi divisi, barre di avanzamento e bandiere usando solo un gradiente. La sintassi a doppia posizione, `colore inizio fine`, la rende più breve da scrivere. I gradienti ripetuti riprendono la stessa idea e la ripetono a piastrelle, come spiegato in [gradienti lineari ripetuti](https://gradiently.design/it/guide/css-repeating-gradient).

- Metà e metà: `linear-gradient(90deg, #0f172a 0 50%, #f8fafc 50% 100%)`
- Tre fasce: `linear-gradient(180deg, #fde68a 0 33%, #fb923c 33% 66%, #e11d48 66% 100%)`
- Gradini diagonali: `linear-gradient(135deg, #312e81 0 40%, #6d28d9 40% 60%, #c084fc 60% 100%)`

Gli hard stop in azione. Nessuna sfumatura, solo bordi.

## Stop con easing: eliminare la giuntura

Una sfumatura lineare ha un inizio e una fine visibili. Se dissolvi uno scrim scuro in trasparenza sopra una foto, spesso si vede una linea dove la dissolvenza comincia, perché la velocità di cambiamento passa di colpo da zero al massimo. Mettere più stop intermedi lungo una curva di easing risolve il problema: il colore comincia a cambiare piano, accelera, poi si assesta. È particolarmente utile per gli overlay dietro il testo e per i [gradienti trasparenti](https://gradiently.design/it/guide/css-gradient-transparent).

```css
/* Linear: a visible edge where the fade starts */
.scrim-linear {
  background: linear-gradient(180deg, rgba(10, 12, 20, 0) 40%, rgba(10, 12, 20, 0.8) 100%);
}

/* Eased: stops follow an ease in out curve, no edge */
.scrim-eased {
  background: linear-gradient(180deg,
    rgba(10, 12, 20, 0) 40%,
    rgba(10, 12, 20, 0.02) 46%,
    rgba(10, 12, 20, 0.08) 52%,
    rgba(10, 12, 20, 0.18) 58%,
    rgba(10, 12, 20, 0.32) 66%,
    rgba(10, 12, 20, 0.48) 74%,
    rgba(10, 12, 20, 0.62) 82%,
    rgba(10, 12, 20, 0.73) 91%,
    rgba(10, 12, 20, 0.8) 100%);
}
```

Entrambi gli scrim finiscono con la stessa intensità. Quello con easing non ha nessuna linea all’inizio.

> **La stessa idea in movimento** Gli stop con easing sono la versione per gradienti della curva di easing nell’animazione. [Easing](https://gradiently.design/it/guide/easing) spiega perché l’ease in out sembra naturale, e lo stesso ragionamento vale qui.

## Posizionare gli stop: un metodo pratico

1. **Scegli il colore guida** Dagli dal 50 al 70 per cento della linea. È lui a dare il tono.
2. **Metti il cambiamento dove deve andare l’occhio** Colloca il cambio di colore più rapido vicino al punto focale, non al centro per abitudine.
3. **Aggiungi hint prima di aggiungere colori** Se una sfumatura non convince, prova prima a spostarne il punto medio. I colori in più aggiungono complessità.
4. **Controlla i punti medi** Guarda il colore a metà strada tra ogni coppia. Se è grigio, aggiungi un colore ponte o sfuma in OKLCH, come spiegato in [interpolazione del gradiente](https://gradiently.design/it/guide/gradient-interpolation).
5. **Ammorbidisci le dissolvenze lunghe** Per tutto ciò che sfuma verso la trasparenza o un colore piatto, aggiungi stop intermedi così non resta nessuna giuntura.

### Da evitare

- Ogni colore con la stessa quota
- Un nuovo colore aggiunto per risolvere ogni problema
- Dissolvenze lineari verso la trasparenza dietro il testo
- Hard stop dove volevi sfumature morbide

### Da fare

- Un colore guida, gli altri in arrivo più tardi
- Color hint per spostare una sfumatura
- Stop con easing per scrim e dissolvenze
- Hard stop solo per strisce e fasce

Se vuoi vedere gli stop nella loro forma più semplice, [i gradienti lineari CSS](https://gradiently.design/it/guide/css-linear-gradient) percorrono tutta la sintassi, e [i tipi di gradiente](https://gradiently.design/it/guide/types-of-gradients) mostrano come si comportano gli stop nei gradienti radiali e conici. In Gradiently un Mark gestisce da sé sfumature e luce a ogni dimensione, così puoi progettare subito e dedicare il tempo alle parole.

## FAQ

### Che cos’è un color stop di un gradiente?

Un punto lungo il gradiente in cui si raggiunge un colore preciso, scritto in CSS come un colore con una posizione facoltativa, per esempio `#7c3aed 40%`.

### Cosa succede se non do una posizione agli stop?

Il browser li distribuisce in modo uniforme da 0 a 100 per cento. Tre colori cadono a 0, 50 e 100 per cento.

### Che cos’è un color hint in un gradiente CSS?

Una percentuale isolata tra due stop, come `#4c1d95, 25%, #f9a8d4`. Sposta il punto a metà della sfumatura senza aggiungere un colore.

### Come faccio una linea netta in un gradiente CSS?

Dai a due stop la stessa posizione, per esempio `#0f172a 50%, #f8fafc 50%`, oppure usa la sintassi a doppia posizione `#0f172a 0 50%, #f8fafc 50% 100%`.

### Come faccio sfumare un gradiente in trasparenza in modo morbido?

Aggiungi più stop intermedi la cui opacità segue una curva ease in out. Una semplice dissolvenza a due stop spesso mostra una linea dove inizia.