In breve
- 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.
In questa pagina
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().
#1e3a8a, #f472b6Cosa succede
#1e3a8a 20%, #f472b6 80%Cosa succede
#1e3a8a, 30%, #f472b6Cosa succede
#1e3a8a 50%, #f472b6 50%Cosa succede
#1e3a8a 0 40%, #f472b6 40% 100%Cosa succede
#1e3a8a 10px, #f472b6 200pxCosa succede
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.
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.
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.
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.
/* 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%);
}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.
- 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 percorrono tutta la sintassi, e i tipi di gradiente 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.
Le domande più frequenti
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.
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