# 60 combinazioni di colori per gradienti che funzionano, con i codici

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

Sessanta gradienti, ordinati per la sensazione che vuoi e non per tinta. Ognuno è un codice CSS vivo da copiare, e ogni gruppo spiega la regola per cui le sue sfumature funzionano.

## The short version

- Le migliori combinazioni di colori per gradienti usano tinte vicine, che si sfumano in modo pulito, oppure collegano tinte lontane con un colore centrale scelto.
- I gradienti calmi tengono vicine luminosità e tinta; i gradienti decisi spingono saturazione e distanza tra le tinte.
- I gradienti scuri funzionano meglio come fondo quasi nero con un solo colore acceso, e i gradienti pastello come vicini pallidi con un inchiostro scuro per il testo.
- Scegliere un gradiente prima per atmosfera e poi per tinta dà risultati più coerenti che scegliere uno alla volta i colori che ti piacciono.
- Qualsiasi combinazione qui può diventare più distintiva con un terzo colore, un angolo diverso o uno strato di grana.

Le migliori **combinazioni di colori per gradienti** seguono una di due regole: usano tinte vicine sulla ruota dei colori, così la sfumatura resta pulita, oppure collegano tinte lontane con un colore centrale scelto, così non diventa mai grigia. Qui sotto ci sono 60 combinazioni che seguono quelle regole, raggruppate per atmosfera: calme, decise, calde, fredde, scure e pastello. Copia qualsiasi campione come CSS, poi leggi la nota sotto ogni gruppo per capire perché funzionano, così puoi fare le tue.

Tutto qui è semplice CSS con colori esadecimali, quindi funziona in qualsiasi browser, e gli stessi codici si possono digitare in qualsiasi strumento di design. Se un termine è nuovo, [cos’è un gradiente](https://gradiently.design/it/guide/what-is-a-gradient) spiega punti e angoli.

## Combinazioni di gradienti calme

I gradienti calmi tengono i colori vicini sia per tinta sia per luminosità. Nulla salta, quindi l’occhio riposa. Sono buoni sfondi per la lettura, brand del benessere, portfolio e tutto ciò che deve sembrare quieto. Salvia e pietra, per esempio, si muove solo di poco sulla ruota e perde un po’ di luminosità strada facendo, e questo si legge come l’ombra su una parete più che come un effetto di colore.

- Vetro di mare: `linear-gradient(135deg, #e0f2f1 0%, #b2dfdb 50%, #80cbc4 100%)`
- Nebbia del mattino: `linear-gradient(180deg, #f1f5f9 0%, #cbd5e1 100%)`
- Salvia e pietra: `linear-gradient(135deg, #e7e5d8 0%, #b5c4a8 50%, #7d9275 100%)`
- Crepuscolo lavanda: `linear-gradient(160deg, #ede9fe 0%, #c4b5fd 55%, #a78bfa 100%)`
- Acqua ferma: `linear-gradient(180deg, #dbeafe 0%, #93c5fd 60%, #60a5fa 100%)`
- Banco di sabbia: `linear-gradient(135deg, #fdf6e3 0%, #f3e1c1 50%, #d9b99b 100%)`
- Eucalipto: `linear-gradient(135deg, #d8e8e0 0%, #9fc2b0 50%, #5f8f7b 100%)`
- Blu ardesia: `linear-gradient(160deg, #cbd5e1 0%, #94a3b8 55%, #64748b 100%)`
- Latte d’avena: `linear-gradient(180deg, #faf7f2 0%, #eee4d4 100%)`
- Pietra di luna: `linear-gradient(135deg, #eef2ff 0%, #e0e7ff 50%, #c7d2fe 100%)`

Calme: una sola famiglia di tinte, piccoli passi di luminosità. Reggono facilmente il testo scuro.

## Combinazioni di gradienti decise

I gradienti decisi usano colori saturi e più distanza sulla ruota. Catturano l’attenzione in un feed affollato, in un banner di saldi o in una pagina di lancio. Il trucco è scegliere coppie la cui sfumatura diretta resti luminosa. Da magenta ad ambra passa per il corallo; da cobalto a corallo passa per il viola. Nessuna si avvicina al grigio, ed è per questo che sembrano vivide da un capo all’altro.

- Viola elettrico: `linear-gradient(135deg, #4f46e5 0%, #9333ea 50%, #db2777 100%)`
- Agrume acceso: `linear-gradient(135deg, #f97316 0%, #facc15 100%)`
- Punch tropicale: `linear-gradient(135deg, #ec4899 0%, #f97316 100%)`
- Segnale: `linear-gradient(90deg, #dc2626 0%, #f97316 50%, #facc15 100%)`
- Bagliore oltremare: `linear-gradient(135deg, #1d4ed8 0%, #06b6d4 100%)`
- Da magenta ad ambra: `linear-gradient(135deg, #c026d3 0%, #f59e0b 100%)`
- Giungla: `linear-gradient(135deg, #15803d 0%, #84cc16 100%)`
- Cobalto e corallo: `linear-gradient(135deg, #2563eb 0%, #f43f5e 100%)`
- Gassosa all’uva: `linear-gradient(135deg, #7e22ce 0%, #e879f9 100%)`
- Lime e verde acqua: `linear-gradient(135deg, #0d9488 0%, #a3e635 100%)`

Decise: alta saturazione, coppie scelte perché il punto medio resti luminoso. Usa testo bianco sull’estremità più scura.

## Combinazioni di gradienti calde

I gradienti caldi vivono tra il rosso e il giallo e sembrano solari, appetitosi e umani. Vanno bene per cibo, ospitalità, lifestyle e tutto ciò che è personale. La maggior parte di questi aggiunge un’estremità più scura e più rossa perché la sfumatura abbia peso: Ora dorata va dal miele pallido all’ambra bruciata come la luce tarda scende lungo una parete. Per la psicologia della temperatura, vedi [colori caldi e freddi](https://gradiently.design/it/guide/warm-and-cool-colors).

- Ora dorata: `linear-gradient(180deg, #fde68a 0%, #f59e0b 55%, #b45309 100%)`
- Terracotta: `linear-gradient(135deg, #fed7aa 0%, #ea580c 60%, #9a3412 100%)`
- Sorbetto alla pesca: `linear-gradient(135deg, #ffedd5 0%, #fdba74 50%, #fb7185 100%)`
- Brace: `linear-gradient(180deg, #fbbf24 0%, #dc2626 55%, #450a0a 100%)`
- Rosa del deserto: `linear-gradient(135deg, #f5d0c5 0%, #d4938b 50%, #a15c5c 100%)`
- Miele: `linear-gradient(135deg, #fef3c7 0%, #fcd34d 50%, #d97706 100%)`
- Cannella: `linear-gradient(135deg, #f5d0a9 0%, #c2703d 55%, #7c3a1d 100%)`
- Striscia di tramonto: `linear-gradient(180deg, #fde047 0%, #fb923c 35%, #e11d48 70%, #7e22ce 100%)`
- Albicocca e prugna: `linear-gradient(135deg, #fdba74 0%, #9d174d 100%)`
- Mattone e oro: `linear-gradient(135deg, #991b1b 0%, #f59e0b 100%)`

Calde: vicini tra rosso, arancione e giallo, di solito con un’estremità più scura per la profondità. Per altri, vedi i [gradienti del tramonto](https://gradiently.design/it/guide/sunset-gradient).

## Combinazioni di gradienti fredde

I gradienti freddi stanno tra il verde e il viola e sembrano puliti, calmi e precisi. Sono la casa naturale di tecnologia, salute, finanza e acqua. Il blu è l’àncora della maggior parte di loro, ed è per questo che sembrano affidabili, e perché un gradiente freddo ha bisogno di un dettaglio distintivo, come un’estremità viola o uno spostamento verso il verde acqua, per non somigliare a ogni banca. Altri blu sono raccolti nei [gradienti blu](https://gradiently.design/it/guide/blue-gradient).

- Ghiacciaio: `linear-gradient(180deg, #ecfeff 0%, #a5f3fc 50%, #22d3ee 100%)`
- Laguna profonda: `linear-gradient(135deg, #06b6d4 0%, #0e7490 55%, #164e63 100%)`
- Nordico: `linear-gradient(135deg, #e2e8f0 0%, #93c5fd 50%, #3b82f6 100%)`
- Notte indaco: `linear-gradient(180deg, #6366f1 0%, #312e81 100%)`
- Da menta a cielo: `linear-gradient(135deg, #6ee7b7 0%, #38bdf8 100%)`
- Pervinca: `linear-gradient(135deg, #c7d2fe 0%, #818cf8 100%)`
- Verde acqua artico: `linear-gradient(135deg, #99f6e4 0%, #14b8a6 50%, #115e59 100%)`
- Ora blu: `linear-gradient(180deg, #1e3a8a 0%, #6366f1 55%, #c4b5fd 100%)`
- Viola ghiaccio: `linear-gradient(135deg, #e0e7ff 0%, #a78bfa 100%)`
- Profondità oceanica: `linear-gradient(180deg, #22d3ee 0%, #1d4ed8 55%, #172554 100%)`

Fredde: vicini tra verde, verde acqua, blu e viola. Un leggero spostamento di tinta le fa sembrare meno aziendali.

## Combinazioni di gradienti scure

I gradienti scuri sono fondi quasi neri da cui sale un solo colore acceso. Sembrano premium, notturni e cinematografici, e fanno sembrare nitido il testo bianco. Tieni l’estremità scura leggermente colorata e non nera pura, così la sfumatura ha qualcosa da attraversare. Le rampe scure fanno banding con facilità, quindi aggiungi grana prima di pubblicare; vedi gli [sfondi con gradiente scuro](https://gradiently.design/it/guide/dark-gradient-backgrounds).

- Viola mezzanotte: `linear-gradient(135deg, #0f0b1e 0%, #3b1d6e 55%, #7c3aed 100%)`
- Mare profondo: `linear-gradient(180deg, #020617 0%, #0c4a6e 60%, #0e7490 100%)`
- Sottobosco: `linear-gradient(160deg, #052e16 0%, #14532d 55%, #3f6212 100%)`
- Rosso bue: `linear-gradient(135deg, #1c0508 0%, #7f1d1d 60%, #b91c1c 100%)`
- Grafite: `linear-gradient(180deg, #0a0a0a 0%, #262626 60%, #404040 100%)`
- Inchiostro e brace: `linear-gradient(160deg, #0c0a09 0%, #292524 60%, #c2410c 100%)`
- Verde petrolio: `linear-gradient(135deg, #021a1f 0%, #0f4c5c 55%, #2a9d8f 100%)`
- Melanzana: `linear-gradient(135deg, #1a0b1f 0%, #4a1942 55%, #86198f 100%)`
- Verde acqua notturno: `linear-gradient(180deg, #031716 0%, #0f3d3e 60%, #14b8a6 100%)`
- Ciliegia scura: `linear-gradient(160deg, #0f0306 0%, #4c0519 55%, #be123c 100%)`

Scure: un quasi nero colorato, un centro profondo e un solo colore acceso all’estremità opposta.

## Combinazioni di gradienti pastello

I pastelli sono colori pallidi, molto luminosi e con un po’ di saturazione. Sembrano freschi, morbidi e cordiali, e vanno bene per bellezza, neonati, cartoleria e campagne primaverili. Poiché sono tutti così chiari, anche tinte pastello distanti possono sfumare in un grigio biancastro, quindi le ultime due qui passano per un lilla pallido. Componi il testo sui pastelli in un inchiostro scuro e non in bianco. Ce n’è di più nei [gradienti pastello](https://gradiently.design/it/guide/pastel-gradients).

- Zucchero filato: `linear-gradient(135deg, #fbcfe8 0%, #c4b5fd 50%, #a5f3fc 100%)`
- Pesca e lilla: `linear-gradient(135deg, #fed7aa 0%, #ddd6fe 100%)`
- Pistacchio: `linear-gradient(135deg, #ecfccb 0%, #bbf7d0 100%)`
- Azzurro baby: `linear-gradient(180deg, #e0f2fe 0%, #bae6fd 100%)`
- Limone e rosa tenue: `linear-gradient(135deg, #fef9c3 0%, #fecdd3 100%)`
- Menta e crema: `linear-gradient(135deg, #d1fae5 0%, #fef3c7 100%)`
- Viola cipria: `linear-gradient(135deg, #f5f3ff 0%, #ddd6fe 50%, #c4b5fd 100%)`
- Sorbetto: `linear-gradient(90deg, #fecaca 0%, #fed7aa 50%, #fef08a 100%)`
- Schiuma di mare e rosa: `linear-gradient(135deg, #ccfbf1 0%, #e9d5ff 50%, #fbcfe8 100%)`
- Cielo all’alba: `linear-gradient(180deg, #bae6fd 0%, #e9d5ff 50%, #fde2c4 100%)`

Pastello: vicini pallidi, oppure pastelli distanti collegati dal lilla perché il centro resti colorato.

## Come usare questi codici di gradiente

Ogni codice è un valore `background` CSS completo. Incollalo su qualsiasi elemento, oppure riporta i colori esadecimali e le posizioni dei punti in uno strumento di design. Sul web, imposta prima un colore pieno di ripiego, preso dal punto più scuro o più importante.

```css
.card {
  background-color: #3b1d6e; /* fallback */
  background-image: linear-gradient(135deg, #0f0b1e 0%, #3b1d6e 55%, #7c3aed 100%);
  color: #ffffff;
}
```

Viola mezzanotte su una card, con un colore di ripiego e testo bianco.

## Come fare la tua combinazione

1. **Scegli prima l’atmosfera** Decidi calma o decisa, calda o fredda, scura o chiara prima di qualsiasi colore. Restringe le scelte a uno dei gruppi qui sopra.
2. **Scegli un colore àncora** Di solito il colore del tuo brand o quello di ciò che vendi. Vedi [come scegliere i colori del brand](https://gradiently.design/it/guide/how-to-choose-brand-colors).
3. **Aggiungi un vicino** Spostati di 30-60 gradi sulla ruota dei colori per un secondo colore pulito. Cambia un po’ anche la luminosità, per dare profondità.
4. **Collega ciò che è distante** Se vuoi una tinta lontana, metti un colore centrale luminoso tra le due così la sfumatura non diventa grigia. Vedi i [gradienti sporchi](https://gradiently.design/it/guide/muddy-gradients).
5. **Rendila tua** Cambia l’angolo, sposta un punto dal 50%, aggiungi un terzo colore o uno strato di grana. Sono i piccoli cambiamenti a impedire che una combinazione sembri un preset.

Un codice popolare è un buon inizio, ma altre migliaia di design partono da lì. Se vuoi un’identità a gradiente che nessun altro possieda, puoi abbinare un’immagine che ami alla sua palette e ai Mark più vicini, oppure crearne di nuovi simili.

## FAQ

### Quali colori stanno bene insieme in un gradiente?

I colori vicini sulla ruota dei colori, come blu e viola o arancione e rosa, si sfumano sempre in modo pulito. I colori distanti funzionano quando un colore centrale luminoso li collega.

### Qual è la combinazione di gradiente più popolare?

Dal viola al rosa e dal blu al ciano sono tra le più usate. Questa popolarità è anche il motivo per cui raramente sembrano distintive.

### Quanti colori deve avere un gradiente?

Due è il più semplice, tre dà profondità e controllo sul punto medio, e oltre cinque è difficile da mantenere pulito.

### Che colore di testo funziona su un gradiente?

Bianco o quasi bianco sui gradienti scuri e decisi, e un inchiostro scuro su quelli pastello e calmi. Controlla il contrasto nel punto più chiaro dietro il testo.

### Posso usare questi codici di gradiente in Figma o Canva?

Sì. Copia i colori esadecimali e le posizioni dei punti nel riempimento a gradiente dello strumento e fai corrispondere l’angolo.