# Gradiente blu: 20 palette dal ghiaccio alla mezzanotte

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

Il blu è il colore più sicuro del design, ed è per questo che tanti gradienti blu si assomigliano. Eccone venti che non lo fanno, dal più chiaro al più scuro, con i codici e il ragionamento dietro.

## The short version

- Un gradiente blu fonde sfumature di blu, spesso con un vicino verde acqua, ciano o viola, dal ghiaccio pallido al navy profondo.
- Il blu è associato a calma, affidabilità e tecnologia, e per questo è molto usato e facile da confondere con quello di tutti gli altri.
- Il blu si fonde bene verso verde acqua, ciano, indaco e viola, ma tende al grigio se lo fondi direttamente verso arancione o giallo.
- Il testo bianco funziona su blu profondi e medi come #1e3a8a e #2563eb, ma sui blu più chiari come #3b82f6 non basta per il testo corrente.
- Spingere un gradiente blu verso il verde acqua o il viola, andare più scuro o più pallido e aggiungere un accento caldo sono i modi più rapidi per uscire dall’aspetto aziendale.

Un **gradiente blu** fonde sfumature di blu, spesso con un vicino verde acqua, ciano o viola. Può sembrare un cielo limpido, un oceano profondo, uno schermo di notte o il bilancio annuale di una banca, a seconda dei blu che scegli e di come li usi. Qui sotto trovi venti palette di gradienti blu con CSS da copiare, dalla più pallida alla più scura, seguite dai colori di testo che funzionano e da come evitare che il blu risulti banale.

## Gradienti azzurri: ghiaccio e cielo

I gradienti di azzurro pallido sembrano aperti, puliti e silenziosi. Stanno bene con sanità, viaggi, benessere e pagine di prodotto che hanno bisogno di spazio. Usa sopra un inchiostro scuro e aggiungi un tocco di calore o di lilla, perché non sembrino freddi e clinici.

- 1. Ghiaccio: `linear-gradient(180deg, #f0f9ff 0%, #bae6fd 100%)`
- 2. Cielo del mattino: `linear-gradient(180deg, #7dd3fc 0%, #e0f2fe 70%, #fef3c7 100%)`
- 3. Foschia pervinca: `linear-gradient(135deg, #dbeafe 0%, #e0e7ff 50%, #f5d0fe 100%)`
- 4. Ghiacciaio: `linear-gradient(135deg, #ecfeff 0%, #a5f3fc 100%)`
- 5. Nuvola arrossata: `linear-gradient(135deg, #e0f2fe 0%, #fce7f3 100%)`

Cinque gradienti azzurri. Le estremità calde o lilla in 2, 3 e 5 li salvano dall’effetto sterile.

## Gradienti blu oceano e verde acqua

Spingere il blu verso il verde gli dà vita. I gradienti oceano sembrano freschi e naturali, e aggirano le associazioni aziendali del blu puro. Stanno bene con brand di viaggi, cibo, sostenibilità e outdoor.

- 6. Mare aperto: `linear-gradient(160deg, #0c4a6e 0%, #0891b2 55%, #67e8f9 100%)`
- 7. Immersione profonda: `linear-gradient(180deg, #a5f3fc 0%, #0e7490 60%, #083344 100%)`
- 8. Laguna: `linear-gradient(135deg, #1e3a8a 0%, #0f766e 55%, #5eead4 100%)`
- 9. Porto: `linear-gradient(135deg, #164e63 0%, #0d9488 100%)`
- 10. Acque basse: `linear-gradient(135deg, #0369a1 0%, #22d3ee 60%, #a7f3d0 100%)`

Dal blu al verde acqua e all’acquamarina. Tinte vicine tengono pulita ogni sfumatura.

## Gradienti blu vivace ed elettrico

I blu saturi sono energici e tecnici. Stanno bene con lanci, app, sport ed eventi. Sono anche i blu più comuni sul web, quindi traggono il massimo vantaggio da una forma inattesa o da un accento caldo.

- 11. Dal cobalto al ciano: `linear-gradient(135deg, #1d4ed8 0%, #3b82f6 50%, #22d3ee 100%)`
- 12. Dall’oltremare al viola: `linear-gradient(135deg, #1e40af 0%, #4f46e5 50%, #8b5cf6 100%)`
- 13. Bagliore blu: `radial-gradient(circle at 30% 20%, #60a5fa 0%, #1d4ed8 45%, #0b1437 100%)`
- 14. Cobalto con bordo dorato: `linear-gradient(135deg, #0047ab 0%, #2563eb 86%, #fbbf24 86%, #f59e0b 100%)`
- 15. Segnale che sale: `linear-gradient(180deg, #0b1437 0%, #1d4ed8 60%, #38bdf8 100%)`

Blu vividi. Il numero 14 tiene l’accento caldo come bordo netto, così blu e oro non si mescolano mai in grigio.

## Gradienti blu scuro e mezzanotte

I gradienti navy profondo e mezzanotte sembrano seri, premium e calmi. Sono ottimi fondi per il testo bianco e per gli accenti luminosi. Attenzione al banding, che si vede facilmente nei blu scuri e lenti; una grana sottile lo risolve. Vedi [banding nei gradienti](https://gradiently.design/it/guide/gradient-banding).

- 16. Mezzanotte: `linear-gradient(180deg, #020617 0%, #0b1437 50%, #1e3a8a 100%)`
- 17. Notte ardesia: `linear-gradient(160deg, #0f172a 0%, #1e293b 60%, #334155 100%)`
- 18. Bagliore all’orizzonte: `radial-gradient(circle at 50% 110%, #1e40af 0%, #0b1437 50%, #020617 100%)`
- 19. Dal navy all’indaco: `linear-gradient(135deg, #0b1437 0%, #312e81 60%, #6d28d9 100%)`
- 20. Crepuscolo sull’acqua: `linear-gradient(180deg, #0a1628 0%, #13315c 55%, #d97757 100%)`

Cinque blu scuri. L’ultimo finisce in un corallo caldo, come l’ultima luce sul mare.

## Quale gradiente blu per quale lavoro

Venti palette sono tante da scegliere. Parti dal compito che il design deve svolgere e dalle parole che deve portare, poi scegli nel gruppo corrispondente.

| Lavoro | Prova | Perché |
| --- | --- | --- |
| Pagina di prodotto o di salute, calma | 1, 3, 4 | Pallidi, aperti, facili sotto testo scuro |
| Viaggi, cibo, outdoor | 6, 8, 10 | Il blu verso il verde sembra naturale |
| Lancio di un’app o evento tech | 11, 13, 15 | Saturi e luminosi, danno energia |
| Premium o finanza | 16, 17, 19 | I fondi profondi sembrano seri e reggono il bianco |
| Qualcosa di memorabile | 2, 14, 20 | Una nota calda rende il blu più specifico |

Un punto di partenza per ogni tipo di design. I numeri rimandano alle palette qui sopra.

## Cosa comunica il blu, e il problema della banalità

In gran parte del mondo il blu è associato a calma, affidabilità e profondità, in parte per via del cielo e dell’acqua. Per questo è così comune in banche, assicurazioni, sanità e tecnologia. È anche il motivo per cui un gradiente di blu medio raramente aiuta a farsi riconoscere: sembra la categoria, non l’azienda. La [psicologia del colore](https://gradiently.design/it/guide/color-psychology) spiega perché la convenzione taglia da entrambe le parti.

### Blu aziendale

- Un blu medio verso un blu più chiaro a 135 gradi
- Blu primario puro, saturo al massimo
- Liscio e piatto, senza texture
- Blu ovunque, niente di caldo

### Blu distintivo

- Spinto verso il verde acqua, l’indaco o il viola
- Molto scuro o molto pallido, non nel mezzo
- Grana, riflesso o un bagliore morbido
- Un solo accento caldo: corallo, oro o albicocca

Il blu si fonde bene verso i suoi vicini: verde acqua, ciano, indaco e viola. Si fonde male verso i suoi opposti. Dal blu dritto all’arancione o al giallo si passa per un centro grigiastro, quindi tieni brevi gli accenti caldi o fai passare la sfumatura per il viola o il rosa. I [colori complementari](https://gradiently.design/it/guide/complementary-colors) spiegano perché.

## Il testo sui gradienti blu

| Testo su sfondo | Contrasto | Verdetto |
| --- | --- | --- |
| Bianco su `#0b1437` | 18.0:1 | Eccellente |
| Bianco su `#1e3a8a` | 10.4:1 | Eccellente |
| Bianco su `#2563eb` | 5.2:1 | Va bene per il testo corrente |
| Bianco su `#3b82f6` | 3.7:1 | Solo testo grande |
| `#0b1a33` su `#60a5fa` | 6.8:1 | Qui funziona l’inchiostro scuro |
| `#0b1a33` su `#bae6fd` | 13.1:1 | Eccellente |

Rapporti di contrasto WCAG, calcolati. Il testo corrente richiede 4,5:1, il testo grande 3:1.

La trappola è il centro della gamma dei blu: un fiordaliso brillante come `#3b82f6` sembra abbastanza forte per il testo bianco, ma scende sotto 4,5:1. Su un gradiente, controlla il contrasto dove il blu è più chiaro dietro le tue parole. [Il testo su un gradiente](https://gradiently.design/it/guide/text-on-gradient) ha il metodo completo.

Un post verticale con un dato, 98% in caratteri grandi su un gradiente profondo

Un fondo profondo lascia che sia un solo numero a parlare.

Una storia verticale con le parole Respira a fondo su un gradiente calmo

Una storia più calma con tanto spazio libero.

```css
.hero {
  background-color: #0b1437;
  background-image: linear-gradient(180deg, #0a1628 0%, #13315c 55%, #d97757 100%);
  color: #ffffff;
}
```

La palette 20, Crepuscolo sull’acqua, come sfondo hero. Tieni i titoli nella parte alta, più scura.

Esportare un gradiente blu come immagine per i social richiede un passaggio in più. Le piattaforme ricomprimono i caricamenti, e i blu scuri e lenti sono tra i primi colori a spezzarsi in bande visibili. Esporta alla dimensione consigliata dalla piattaforma, aggiungi una grana sottile prima di salvare e usa il PNG dove la piattaforma lo accetta. I [gradienti con grana](https://gradiently.design/it/guide/grainy-gradients) mostrano quanta grana basta.

Per i viola vicini al blu, vedi [gradienti viola](https://gradiently.design/it/guide/purple-gradient); per opzioni più verdi, vedi [gradienti verdi](https://gradiently.design/it/guide/green-gradient).

## FAQ

### Quali colori stanno bene con il blu in un gradiente?

Verde acqua, ciano, indaco e viola si fondono in modo pulito con il blu. I colori caldi come corallo e oro sono buoni accenti se tenuti brevi, perché fondere il blu dritto in arancione o giallo dà il grigio.

### Qual è un buon codice CSS per un gradiente blu?

Per un blu profondo e calmo prova linear-gradient(180deg, #020617 0%, #0b1437 50%, #1e3a8a 100%). Ogni palette di questa pagina si può copiare come CSS.

### Il testo bianco si legge su un gradiente blu?

Sui blu profondi e medio scuri sì. Sui blu più chiari come #3b82f6 il testo bianco scende sotto il rapporto di 4,5:1 consigliato per il testo corrente.

### Come faccio un gradiente blu meno aziendale?

Spingilo verso il verde acqua o il viola, scegli blu molto profondi o molto pallidi invece del blu medio, aggiungi grana e usa un piccolo accento caldo.