# Gradienti verde e blu: codici freschi dall’effetto naturale

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

Il verde che incontra il blu è il colore dell’acqua bassa sulla sabbia, di un lago sotto i pini, dell’aurora boreale. Per questo la coppia sembra così naturale. Ecco come mantenerla tale.

## The short version

- Un gradiente verde e blu fonde tonalità fredde vicine come smeraldo #10b981, verde petrolio #0d9488 e azzurro cielo #0284c7, con petrolio o acqua al centro.
- Poiché verde e blu sono adiacenti sulla ruota dei colori, la fusione resta pulita e appare naturale perché richiama acqua, ghiaccio e cielo.
- I verdi e gli acqua accesi sono troppo chiari per il testo bianco: usa un inchiostro verde petrolio scuro sulle versioni chiare e bianco o menta su quelle scure.
- I gradienti verde e blu scuri trasmettono calma e fiducia, mentre quelli chiari sono freschi e puliti.
- La coppia si adatta a viaggi, benessere, finanza, marchi outdoor e tecnologia, e un accento caldo come sabbia o corallo evita l’effetto freddo.

Un **gradiente verde e blu** fonde due vicini freddi: verdi come smeraldo `#10b981` o menta `#a7f3d0` e blu come `#0284c7` o cielo `#bae6fd`, con petrolio e acqua a fare da ponte. La fusione resta pulita perché tra le due tonalità non c’è un punto grigio. Appare naturale perché lo vedi da sempre in acqua, ghiaccio e cielo. I codici qui seguono quattro paesaggi, con i colori del testo che si leggono su ciascuno e il CSS per tema chiaro e scuro.

## Perché verde e blu stanno bene insieme

Verde e blu sono [colori analoghi](https://gradiently.design/it/guide/analogous-colors): stanno uno accanto all’altro sulla ruota, quindi ogni passaggio tra loro è un colore vero, soprattutto petrolio e acqua. La natura mostra di continuo questo accostamento, dai mari bassi dove l’acqua blu scorre su alghe verdi e sabbia, ai laghi glaciali e alle foreste di pini riflesse nell’acqua ferma. Prendere spunto da quelle scene è il modo più facile per rendere il gradiente calmo invece che aziendale.

- Inchiostro verde petrolio scuro: #042f2e
- Pino: #065f46
- Smeraldo: #10b981
- Verde petrolio: #0d9488
- Acqua: #22d3ee
- Blu lago: #0284c7
- Menta: #a7f3d0
- Cielo: #bae6fd

La gamma dal verde al blu con un inchiostro scuro per il testo. Petrolio e acqua sono i colori ponte che mantengono continua la fusione.

## Laguna: gradienti acqua e verde brillanti

L’acqua tropicale bassa è quasi tutta acqua con verde dove è più bassa e blu dove si approfondisce. Questi gradienti hanno una luminosità da vacanza. Aggiungi un punto sabbia calda se vuoi che sembrino una spiaggia e non una piscina.

- Laguna: `linear-gradient(180deg, #a5f3fc 0%, #2dd4bf 50%, #0891b2 100%)`
- Barriera: `linear-gradient(135deg, #6ee7b7 0%, #22d3ee 55%, #0284c7 100%)`
- Banco di sabbia: `linear-gradient(0deg, #fde68a 0%, #5eead4 30%, #0ea5e9 100%)`

Gradienti verde e blu brillanti. Il terzo aggiunge sabbia in basso, che scalda tutto il fotogramma. [I gradienti oceano](https://gradiently.design/it/guide/ocean-gradient) ne ha altri.

## Lago tra i pini: gradienti verde e blu scuri

Il verde scuro che sfuma nel blu scuro è silenzioso, elegante e affidabile. Pensa a un lago di bosco al tramonto o al colore di una vecchia bottiglia. Reggono bene il testo bianco e si adattano a finanza, attrezzatura outdoor, architettura e a qualsiasi marchio voglia sentirsi saldo.

- Lago tra i pini: `linear-gradient(160deg, #022c22 0%, #065f46 45%, #0c4a6e 100%)`
- Petrolio al chiaro di luna: `radial-gradient(circle at 80% 20%, #0d9488 0%, #134e4a 40%, #031418 80%)`
- Dalla bottiglia al blu notte: `linear-gradient(135deg, #064e3b 0%, #115e59 50%, #1e3a8a 100%)`

Verde e blu scuri. Nelle immagini compresse tendono a formare bande, quindi aggiungi una grana fine prima dell’esportazione.

## Ghiacciaio: gradienti menta pallido e azzurro

Schiarisci la coppia fino in cima e ottieni ghiaccio glaciale e mattine fredde: pulito, arioso e molto calmo. Si adattano a sanità, cura della pelle, pulizie e app di produttività. Possono sembrare cliniche, quindi un tocco di bianco caldo aiuta.

- Ghiacciaio: `linear-gradient(135deg, #ecfdf5 0%, #a7f3d0 45%, #bae6fd 100%)`
- Mattina fredda: `linear-gradient(180deg, #f0fdfa 0%, #ccfbf1 50%, #e0f2fe 100%)`
- Ghiaccio al sole: `radial-gradient(circle at 25% 25%, #fefce8 0%, #d1fae5 45%, #bae6fd 100%)`

Verde e blu pallidi. L’inchiostro verde petrolio scuro si legge su tutti. [I gradienti menta](https://gradiently.design/it/guide/mint-gradient) approfondisce il verde.

## Aurora: verde e blu su un cielo notturno

L’aurora boreale è luce verde e blu sul nero, per questo i gradienti aurora sono tra gli sfondi scuri più amati. Tieni il colore in bande morbide e lascia che il fondo scuro occupi gran parte del fotogramma. [I gradienti aurora](https://gradiently.design/it/guide/aurora-gradients) tratta la tecnica completa.

- Aurora: `radial-gradient(ellipse at 30% 30%, #34d399 0%, #0f766e 30%, #0b1e3a 65%, #030712 90%)`
- Banda di luce: `linear-gradient(170deg, #030712 0%, #064e3b 40%, #0e7490 70%, #030712 100%)`
- Vortice polare: `conic-gradient(from 210deg at 60% 40%, #030712, #10b981, #0ea5e9, #030712)`

Verde e blu su un nero quasi pieno. Menta e acqua sono entrambi ottimi colori di testo su questi.

## Colori del testo sui gradienti verde e blu

Smeraldo e acqua sono sorprendentemente chiari, quindi il testo bianco sulle versioni accese spesso non funziona. L’inchiostro verde petrolio scuro funziona sulle fusioni chiare e tiene tutto nella stessa famiglia; bianco e menta si leggono bene sulle scure. I rapporti qui sotto usano la formula WCAG. [Il testo su un gradiente](https://gradiently.design/it/guide/text-on-gradient) mostra cosa fare quando una riga attraversa entrambi gli estremi.

| Sfondo | Testo | Contrasto | Verdetto |
| --- | --- | --- | --- |
| Smeraldo `#10b981` | Bianco | 2,5:1 | Non supera |
| Acqua `#22d3ee` | Bianco | 1,8:1 | Non supera |
| Verde petrolio `#0d9488` | Bianco | 3,7:1 | Solo titoli grandi |
| Menta `#a7f3d0` | Petrolio scuro `#042f2e` | 11,3:1 | Eccellente |
| Pino `#065f46` | Bianco | 7,7:1 | Eccellente |
| Notte `#04202a` | Menta acqua `#5eead4` | 11,4:1 | Eccellente, colore come inchiostro |

In una fusione verde e blu l’estremo verde è di solito il più chiaro, quindi controlla prima il contrasto lì.

Un post verticale di viaggi con scritte verde petrolio scuro su un gradiente acqua e verde brillante

Il post di un’agenzia di viaggi su toni lagunari brillanti, con testo verde petrolio scuro.

Un’immagine di link orizzontale per un’app di finanza con scritte bianche su un gradiente dal verde scuro al blu notte

Un’immagine di link LinkedIn dal pino al blu notte per un’app di finanza.

## Come scaldare una palette verde e blu

Verde e blu sono entrambi freddi, quindi un intero brand in questi colori può sembrare distante. Un solo accento caldo risolve. Sabbia, corallo e oro tenue stanno tutti dall’altra parte della ruota rispetto al petrolio: usali accanto al gradiente, in un pulsante, in un logo o in una striscia su un bordo, invece di fonderli. [I colori complementari](https://gradiently.design/it/guide/complementary-colors) spiega perché fondere attraverso la ruota dà il grigio.

### Da evitare

- Petrolio fuso direttamente nel corallo
- Testo bianco su smeraldo o acqua
- Ogni superficie in colori freddi
- Verde saturo su blu saturo a piena forza

### Da fare

- Corallo o sabbia accanto al gradiente come accento
- Inchiostro verde petrolio scuro sulle fusioni chiare
- Un bianco caldo o crema per pannelli e testi
- Un colore che guida, l’altro che sostiene

## CSS del gradiente verde e blu per tema chiaro e scuro

```css
.hero {
  background-color: #ecfdf5;
  background-image: linear-gradient(135deg, #ecfdf5 0%, #a7f3d0 45%, #bae6fd 100%);
  color: #042f2e;
}

@media (prefers-color-scheme: dark) {
  .hero {
    background-color: #031418;
    background-image:
      radial-gradient(ellipse at 30% 25%, #0d9488 0%, transparent 50%),
      linear-gradient(160deg, #022c22 0%, #0c4a6e 100%);
    color: #ecfeff;
  }
}
```

Ghiacciaio nel tema chiaro, lago tra i pini in quello scuro. Stesse tonalità, quindi il brand resta un tutt’uno.

Abbinare una versione chiara e una scura dello stesso verde e blu è un modo elegante per far sembrare il cambio di tema progettato e non invertito. [I gradienti per il tema scuro](https://gradiently.design/it/guide/dark-mode-gradients) approfondisce. In Gradiently un Mark si adatta a ogni formato che progetti e sceglie inchiostro chiaro o scuro riga per riga dalla sua palette, così sia i toni brillanti della laguna sia quelli scuri del pino mantengono leggibili le parole.

## FAQ

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

Un’opzione brillante è `linear-gradient(135deg, #6ee7b7 0%, #22d3ee 55%, #0284c7 100%)`. Per qualcosa di più scuro e calmo, prova `linear-gradient(160deg, #022c22 0%, #065f46 45%, #0c4a6e 100%)`.

### Verde e blu stanno bene insieme?

Sì. Sono vicini sulla ruota dei colori, con verde petrolio e acqua in mezzo, quindi la fusione resta pulita e appare naturale.

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

Il verde petrolio, intorno a `#0d9488`, con acqua e turchese come parenti più brillanti.

### Che colore di testo va su un gradiente verde e blu?

Verde petrolio scuro come `#042f2e` sulle versioni chiare e bianco o menta su quelle scure. Il bianco su smeraldo o acqua brillanti non supera il contrasto.

### Cosa significa un gradiente verde e blu per un brand?

Di solito comunica calma, freschezza e fiducia, perché richiama acqua, cielo e piante. Le versioni scure danno stabilità; quelle chiare pulizia.