# Gradiente blu e viola: 20 codici che si fondono bene

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

Blu e viola sono vicini, quindi si fondono più facilmente di quasi ogni altra coppia. È anche per questo che tanti gradienti blu e viola sembrano uguali. Ecco venti che non lo sono.

## The short version

- Un gradiente blu e viola fonde tinte vicine come il blu #3b82f6, l’indaco #4f46e5 e il viola #7c3aed, quindi la transizione resta pulita senza un colore ponte.
- Il problema più comune dei gradienti da blu a viola non è il fango ma l’uniformità, perché la diagonale predefinita da indaco a viola è usata ovunque.
- Le sfumature tra ciano e rosa, o tra blu spenti e viola spenti, possono diventare grigie al centro, e interpolare in OKLCH le mantiene luminose.
- Il testo bianco si legge bene su indaco e viola ma spesso fallisce su blu medi e lavanda, dove funziona meglio un inchiostro indaco scuro.
- Un fondo scuro, un terzo colore usato con parsimonia e un po’ di grana fanno sembrare un gradiente blu e viola pensato invece che predefinito.

Un **gradiente blu e viola** corre tra tinte vicine sulla ruota cromatica: blu `#3b82f6`, indaco `#4f46e5`, viola `#7c3aed` e i morbidi pervinca e lavanda intorno. Poiché le tinte stanno una accanto all’altra, la sfumatura resta pulita quasi automaticamente. La parte difficile è farne uno che non assomigli alle migliaia di icone di app e slide di conferenze che già ne usano uno. Qui sotto trovi venti codici in quattro atmosfere, i casi in cui la sfumatura diventa spenta e i colori del testo che si leggono su ciascuno.

## Perché blu e viola si fondono così bene

Il viola è blu con un po’ di rosso dentro. Passa dall’uno all’altro e ogni passo intermedio è un colore vero e saturo: blu, indaco, viola. Confrontalo con la sfumatura da blu ad arancione, dove il punto a metà strada è un grigio piatto. [I colori analoghi](https://gradiently.design/it/guide/analogous-colors) spiega il principio, e [la ruota dei colori](https://gradiently.design/it/guide/color-wheel) mostra dove sta ogni tinta.

- Mezzanotte: #0f0a2e
- Indaco profondo: #1e1b4b
- Blu reale: #1d4ed8
- Blu: #3b82f6
- Indaco: #4f46e5
- Viola: #7c3aed
- Lavanda: #a78bfa
- Nebbia pervinca: #c7d2fe

La famiglia dal blu al viola. Scegli tre o quattro campioni adiacenti e il gradiente resterà vivido per tutta la sua lunghezza.

## Gradienti blu e viola scuri: notte e profondità

Parti dallo scuro e il gradiente sembra subito meno generico. Un fondo di mezzanotte con luce indaco e viola sa di cielo notturno, sala da concerto o app premium. Questi cinque portano benissimo il testo chiaro.

- Indaco di mezzanotte: `linear-gradient(160deg, #0f0a2e 0%, #1e1b4b 45%, #4f46e5 100%)`
- Sorgere della luna viola: `radial-gradient(circle at 75% 20%, #7c3aed 0%, #1e1b4b 40%, #07051a 80%)`
- Dal navy alla prugna: `linear-gradient(135deg, #172554 0%, #312e81 50%, #581c87 100%)`
- Bagliore all’orizzonte: `radial-gradient(ellipse at 50% 110%, #6366f1 0%, #1e1b4b 45%, #050414 85%)`
- Corrente profonda: `linear-gradient(200deg, #0b1023 0%, #1d4ed8 55%, #6d28d9 100%)`

Gradienti blu e viola scuri. Il banding si vede di più in sfumature come queste, quindi aggiungi grana prima di esportare.

## Gradienti blu e viola morbidi: pervinca e lavanda

Schiarisci la famiglia e diventa calma, sognante e un po’ nostalgica. Questi vanno bene per benessere, sonno, cartoleria e tutto ciò che punta a un’atmosfera dolce. Tieni l’inchiostro scuro; il bianco scompare sulla maggior parte. Ce ne sono altri nei [gradienti pastello](https://gradiently.design/it/guide/pastel-gradients).

- Foschia pervinca: `linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 50%, #ddd6fe 100%)`
- Lavanda del mattino: `linear-gradient(180deg, #dbeafe 0%, #e9d5ff 100%)`
- Nuvola lilla: `radial-gradient(circle at 30% 30%, #f5f3ff 0%, #c4b5fd 55%, #a5b4fc 100%)`
- Campo di fiordalisi: `linear-gradient(120deg, #bfdbfe 0%, #a5b4fc 50%, #c4b5fd 100%)`
- Dalla carta al viola: `linear-gradient(160deg, #f8fafc 0%, #e0e7ff 45%, #a78bfa 100%)`

Sfumature morbide di pervinca e lavanda. Il testo indaco scuro si legge su ognuna.

## Gradienti blu e viola elettrici

Alza la saturazione e la coppia diventa rumorosa, sintetica e molto digitale. Questi vanno bene per giochi, musica, lanci tecnologici e tutto ciò che è notturno. Usali in fasce o bagliori più che su un intero poster, e abbinali a un quasi nero perché abbiano qualcosa contro cui brillare. [I gradienti neon](https://gradiently.design/it/guide/neon-gradients) ha la tecnica completa.

- Viola elettrico: `linear-gradient(135deg, #2563eb 0%, #7c3aed 100%)`
- Dal cielo all’orchidea: `linear-gradient(90deg, #0ea5e9 0%, #6366f1 50%, #a855f7 100%)`
- Impulso indaco: `radial-gradient(circle at 50% 50%, #818cf8 0%, #4338ca 40%, #0f0a2e 80%)`
- Giro ultravioletto: `conic-gradient(from 200deg at 50% 50%, #1d4ed8, #7c3aed, #c026d3, #1d4ed8)`
- Dal nero all’ultravioletto: `linear-gradient(180deg, #000000 0%, #312e81 60%, #8b5cf6 100%)`

Gradienti blu e viola saturi. Il primo è il classico; gli altri ne sono versioni meno scontate.

## Gradienti blu e viola con un terzo colore

Il modo più rapido per fare tuo un gradiente blu e viola è un colore in più usato con parsimonia. Il rosa lo porta verso il crepuscolo, il verde petrolio verso l’aurora, l’oro verso il lusso e la pesca verso un’alba morbida.

- Crepuscolo con rosa: `linear-gradient(160deg, #1e1b4b 0%, #6d28d9 55%, #f472b6 100%)`
- Aurora verde petrolio: `linear-gradient(135deg, #0f766e 0%, #3b82f6 45%, #7c3aed 100%)`
- Indaco con oro: `radial-gradient(circle at 85% 15%, #fbbf24 0%, #4c1d95 30%, #0f0a2e 75%)`
- Alba di lavanda: `linear-gradient(180deg, #c7d2fe 0%, #c4b5fd 50%, #fed7aa 100%)`
- Blu, viola, cremisi: `linear-gradient(120deg, #1d4ed8 0%, #7c3aed 50%, #e11d48 100%)`

Venti codici in tutto. Rosa, verde petrolio e cremisi stanno accanto al blu o al viola sulla ruota; l’oro resta una piccola luce e la pesca resta pallida, quindi nessuna sfumatura passa per il grigio.

## Quando un gradiente blu e viola diventa fangoso

Da blu a viola è sicuro. Due sfumature affini non lo sono. Il ciano nel rosa attraversa gran parte della ruota, e i blu spenti e grigiastri nei viola spenti danno un centro senza vita. In entrambi i casi la soluzione è la stessa: interpolare in OKLCH, che mantiene uniformi luminosità e saturazione lungo la sfumatura. [I gradienti fangosi](https://gradiently.design/it/guide/muddy-gradients) e [l’interpolazione dei gradienti](https://gradiently.design/it/guide/gradient-interpolation) approfondiscono.

```css
/* Default sRGB blend: can dull in the middle */
.card--srgb {
  background: linear-gradient(90deg, #06b6d4, #ec4899);
}

/* OKLCH blend: stays bright, passes through violet */
.card--oklch {
  background: linear-gradient(90deg in oklch, #06b6d4, #ec4899);
}

/* A safe blue purple hero with a fallback */
.hero {
  background-color: #1e1b4b;
  background-image: linear-gradient(160deg in oklch, #0f0a2e, #4f46e5 60%, #7c3aed);
  color: #eef2ff;
}
```

Aggiungere `in oklch` cambia il modo in cui il browser mescola i punti. I browser più vecchi ignorano l’intera dichiarazione, quindi tieni un colore di sfondo come riserva.

## Come rendere un gradiente blu e viola meno generico

La diagonale da viola a blu è così familiare che la gente la legge come predefinita prima ancora di leggere ciò che ci hai scritto sopra. Non servono colori esotici per evitarlo. Bastano piccole decisioni deliberate, che si sommano.

- **Scegli prima un fondo.** Un fondo di mezzanotte o color carta dà l’atmosfera più del blu o del viola, e ti distingue subito dal predefinito vivace.
- **Sposta la luce fuori dalla diagonale.** Metti il viola più luminoso in un angolo con un gradiente radiale invece di farlo correre da bordo a bordo a 135 gradi.
- **Usa punti irregolari.** Lascia che l’indaco tenga il 60 per cento della superficie e il viola solo l’ultimo tratto. Terzi uguali sembrano fatti da una macchina.
- **Aggiungi un accento in un solo punto.** Un filo di rosa, verde petrolio o oro, come nella serie sopra, si ricorda molto più dei colori di base.
- **Finisci con la grana.** Uno strato di rumore fine nasconde il banding e trasforma una sfumatura da schermo in una superficie; [i gradienti con grana](https://gradiently.design/it/guide/grainy-gradients) ha il codice.
- **Disegna ogni misura separatamente.** La luce dovrebbe cadere in un punto sensato su una storia e su un banner, non dove la lascia un ritaglio.

Aiutano anche i nomi delle atmosfere. «Indaco di mezzanotte con un bordo dorato» è una decisione che puoi ripetere per un intero anno di post; «gradiente blu e viola» no.

## Testo su un gradiente blu e viola

| Sfondo | Testo | Contrasto | Verdetto |
| --- | --- | --- | --- |
| Indaco `#4f46e5` | Bianco | 6,3:1 | Buono |
| Viola `#7c3aed` | Bianco | 5,7:1 | Buono |
| Blu `#3b82f6` | Bianco | 3,7:1 | Solo titoli grandi |
| Lavanda `#a78bfa` | Bianco | 2,7:1 | Non va |
| Lavanda `#a78bfa` | Indaco profondo `#1e1b4b` | 5,9:1 | Buono |
| Nebbia pervinca `#c7d2fe` | Indaco profondo `#1e1b4b` | 10,7:1 | Eccellente |

Rapporti di contrasto WCAG. Il blu medio è più chiaro di quanto sembri, cosa che coglie in fallo molti design da blu a viola all’estremo blu.

Un post quadrato LinkedIn che annuncia la versione 3 con lettere bianche su un gradiente indaco scuro e viola

Un post LinkedIn su fondo indaco scuro. Testo chiaro, bagliore viola tenuto su un lato.

Una storia verticale con lettere indaco scuro su un gradiente pallido di pervinca e lavanda

Una storia su pervinca morbido con inchiostro indaco profondo.

Quando le parole passano dall’estremo scuro a quello chiaro dello stesso gradiente, nessun inchiostro funziona dappertutto. [Il testo su un gradiente](https://gradiently.design/it/guide/text-on-gradient) tratta le opzioni. In Gradiently, l’inchiostro automatico se ne occupa riga per riga, scegliendo testo chiaro o scuro dalla palette del Mark, così uno sfondo blu e viola non inghiotte mai un titolo.

## FAQ

### Qual è un buon codice per un gradiente blu e viola?

Uno affidabile è `linear-gradient(135deg, #2563eb 0%, #7c3aed 100%)`. Per qualcosa di meno scontato, parti da un fondo scuro: `linear-gradient(160deg, #0f0a2e 0%, #1e1b4b 45%, #4f46e5 100%)`.

### Blu e viola stanno bene insieme in un gradiente?

Sì. Sono vicini sulla ruota cromatica, quindi ogni passo tra loro è un colore pulito e saturo come l’indaco.

### Perché il mio gradiente da blu a rosa è grigio al centro?

Il browser mescola in sRGB per impostazione predefinita, e questo può spegnere le sfumature che attraversano gran parte della ruota. Aggiungi `in oklch` dopo l’angolo per tenere luminoso il centro.

### Che colore di testo uso su un gradiente blu e viola?

Il bianco si legge bene su indaco e viola. Su blu medio, lavanda e pervinca, un indaco profondo come `#1e1b4b` è più sicuro.

### Che colore sta tra il blu e il viola?

L’indaco. Un indaco tipico per il design è `#4f46e5`, e gli indaci più scuri stanno intorno a `#312e81`.