In breve
- Un gradiente a due colori fonde un colore in un altro, ed è il gradiente più semplice da progettare, ricolorare e mantenere coerente.
- Se una coppia funziona dipende soprattutto dalla distanza di tinta: le tinte vicine si fondono sempre in modo pulito, quelle opposte diventano grigie al centro.
- Una differenza di luminosità tra i due colori dà al gradiente direzione e profondità.
- Due colori della stessa famiglia di tinta, uno chiaro e uno scuro, creano il gradiente più versatile, perché a un’estremità il testo funziona.
- Poiché i gradienti a due colori sono così comuni, è un piccolo cambiamento, come un angolo insolito, un punto medio spostato o uno strato di grana, a renderne uno riconoscibile.
In questa pagina
Un gradiente a due colori è una sfumatura da un colore a un altro, ed è il gradiente più sicuro che puoi creare: due colori sono facili da scegliere, facili da ricolorare e facili da mantenere coerenti. Se una coppia funziona dipende da due cose: quanto sono distanti le tinte sulla ruota dei colori e quanto sono diverse in luminosità. Se le azzecchi, quasi qualsiasi coppia di colori fa un buon gradiente. Qui sotto trovi le regole, poi trenta coppie che le seguono.
Regola 1: guarda la distanza di tinta
La distanza di tinta è quanto due colori sono lontani sulla ruota dei colori, misurata in gradi. Prevede cosa succede al centro della sfumatura, che è il punto in cui i gradienti a due colori riescono o falliscono.
| Distanza di tinta | Cosa succede al centro | Verdetto |
|---|---|---|
| Da 0 a 60 gradi | Un colore intermedio pulito, come il viola tra blu e rosa | Sempre sicuro |
| Da 60 a 120 gradi | Di solito un nuovo colore netto, a volte un po’ spento | Sicuro; controlla il centro |
| Da 120 a 150 gradi | Spesso un centro più morbido e grigiastro | Prova con attenzione |
| Da 150 a 180 gradi | Grigio o marrone al centro con la fusione predefinita | Serve un colore ponte oppure OKLCH |
Le distanze della prima riga sono colori analoghi. Quelle dell’ultima riga sono colori complementari, che affiancati colpiscono ma hanno bisogno di aiuto quando si fondono.
Regola 2: dagli una differenza di luminosità
Due colori con la stessa luminosità creano un gradiente che sembra piatto, come se non andasse da nessuna parte. Una chiara differenza di luminosità dà una direzione alla sfumatura, come una luce che arriva da un lato. Crea anche un vantaggio pratico: il testo può stare all’estremità più scura in bianco, o a quella più chiara con un colore scuro.
Sembra piatto
- Due colori di tono medio con la stessa luminosità
- Due colori pienamente saturi senza un’estremità scura
- Nessun posto evidente per il testo
Sembra illuminato
- Un colore più chiaro e uno più scuro
- Un colore saturo abbinato a un vicino più profondo
- Un’estremità chiara e una scura ben definite per il testo
Coppie di tinte vicine
Queste coppie stanno entro circa 60 gradi l’una dall’altra. È impossibile renderle fangose e stanno bene quasi su tutto, dai pulsanti agli sfondi a tutto schermo. Mirtillo e Marea, per esempio, sono entrambe un blu che va verso il viola, e si leggono come un unico colore che cattura la luce.
Coppie dal chiaro allo scuro
Queste coppie restano in una sola famiglia di tinta e cambiano luminosità dal pallido al profondo. Sono i gradienti a due colori più versatili: abbastanza calmi per un’intera pagina, e con un’estremità scura pronta per un testo bianco. Sono anche ottimi gradienti di brand, perché estendono un unico colore del brand invece di aggiungerne uno nuovo. Vedi gli schemi di colore monocromatici per la teoria.
Coppie a contrasto che restano pulite
Queste coppie sono più distanti, tra circa 90 e 150 gradi, ma ognuna ha un punto medio luminoso con la fusione predefinita. Pesca e viola passano per il malva, ciano e magenta per il pervinca, arancione e magenta per il rosa acceso. Sono più energiche delle coppie vicine, adatte a lanci, musica e tutto ciò che deve farsi notare.
Spostare il punto medio
Di default, un gradiente a due colori è metà e metà. Il CSS ti permette di spostare il punto in cui i due colori sono mescolati in parti uguali con un suggerimento di colore: una percentuale da sola tra i punti. Spingila verso un’estremità e l’altro colore occupa più superficie, senza aggiungere un terzo colore.
/* Even blend: the mix point sits at 50% */
.even { background: linear-gradient(135deg, #3b82f6, #8b5cf6); }
/* Colour hint at 25%: violet arrives early and fills most of the box */
.violet { background: linear-gradient(135deg, #3b82f6, 25%, #8b5cf6); }
/* Colour hint at 75%: blue holds on for most of the box */
.blue { background: linear-gradient(135deg, #3b82f6, 75%, #8b5cf6); }Dove mettere il testo su un gradiente a due colori
Un gradiente a due colori ha un layout già incorporato: un’estremità è più chiara e una più scura. Metti le parole all’estremità che contrasta di più con il colore del testo, e lascia che l’altra porti il colore. Per un testo bianco è l’estremità più scura; per un testo scuro, quella più chiara. Non centrare mai un testo piccolo sul punto medio di una coppia dal chiaro allo scuro, perché il contrasto cambia lungo la riga. Il testo su un gradiente spiega i controlli nel dettaglio.
Parole all’estremità calma della sfumatura, colore all’altra: il layout più semplice che un gradiente offre.
Rendere tuo un gradiente a due colori
I gradienti a due colori sono popolari proprio perché sono sicuri, quindi le coppie più note sono ovunque. Per renderne uno riconoscibile, cambia qualcosa che le persone notano senza pensarci: un angolo più ripido o insolito (vedi l’angolo del gradiente), un punto medio spostato, una grana fine, o un terzo colore usato solo su un bordo. Quando sei pronto ad andare oltre i due, le 60 combinazioni di colori per gradienti sono raggruppate per atmosfera.
Se conosci già i due colori che vuoi, puoi scriverli nella ricerca del Mercato, ad esempio «blu e viola», e creare design con i Mark costruiti intorno a loro.
Le domande più frequenti
Quali due colori fanno il gradiente migliore?
I colori entro circa 60 gradi l’uno dall’altro sulla ruota dei colori, con una chiara differenza di luminosità, creano i gradienti a due colori più affidabili.
Perché il mio gradiente a due colori è grigio al centro?
I colori sono quasi opposti sulla ruota dei colori. Aggiungi un colore ponte luminoso al centro oppure fondili in OKLCH.
Un gradiente a due colori è meglio di uno a tre?
Due colori sono più semplici e più sicuri. Tre danno più profondità e permettono di controllare il punto medio, ma è più facile sbagliare.
Come cambio il punto in cui due colori si incontrano in un gradiente CSS?
Aggiungi un suggerimento di colore, una percentuale da sola tra i due punti, come linear-gradient(#3b82f6, 25%, #8b5cf6).
Dove va il testo su un gradiente a due colori?
All’estremità con più contrasto per il colore del testo: bianco sull’estremità più scura, testo scuro su quella più chiara.
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
