# Gradienti vivaci: codici saturi che non vibrano

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

Il colore saturo è il modo più rapido per farsi notare e il più rapido per far dolere gli occhi. Questi codici sono accesi di proposito e costruiti perché i bordi non sfarfallino, con le ragioni, così puoi crearne di tuoi.

## The short version

- Un gradiente vivace usa colori molto saturi, ma resta piacevole da guardare solo quando i colori vicini hanno tonalità simili e si distinguono chiaramente per luminosità.
- Colori di tonalità opposte e luminosità simile, accostati bordo a bordo, sembrano sfarfallare, un effetto spesso chiamato vibrazione cromatica.
- Opposti saturi sfumati direttamente in sRGB passano per un centro grigiastro, cosa che interpolare in oklch evita in buona parte.
- Un fondo scuro o neutro dà all’occhio un posto dove riposare e fa sembrare il colore vivace più luminoso che sul bianco.
- Il testo su un gradiente vivace si legge meglio in nero quasi pieno o in bianco, mai in un altro colore saturo di luminosità simile.

Un **gradiente vivace** è brillante e saturo senza vibrare quando valgono due regole: ogni colore sta vicino al suo vicino sulla ruota dei colori e ogni passaggio cambia chiaramente di luminosità. Rompi la prima e il centro diventa fangoso; rompi la seconda, mettendo fianco a fianco tonalità opposte di pari luminosità, e il bordo sembra sfarfallare. I dodici codici qui sotto seguono entrambe le regole, quindi sono forti come lo è un poster, non come lo è un’emicrania.

## Dodici codici per gradienti vivaci

- Mango: `linear-gradient(135deg, #f59e0b 0%, #f97316 50%, #ef4444 100%)`
- Viola elettrico: `linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #c026d3 100%)`
- Laguna: `linear-gradient(135deg, #0284c7 0%, #06b6d4 50%, #10b981 100%)`
- Fenicottero: `linear-gradient(135deg, #db2777 0%, #f43f5e 50%, #fb923c 100%)`
- Gazzosa al lime: `linear-gradient(135deg, #16a34a 0%, #84cc16 55%, #facc15 100%)`
- Ultra: `linear-gradient(135deg, #1d4ed8 0%, #6d28d9 50%, #db2777 100%)`
- Ciliegia pop: `linear-gradient(160deg, #be123c 0%, #e11d48 45%, #f472b6 100%)`
- Ghiacciaio: `linear-gradient(135deg, #0d9488 0%, #22d3ee 50%, #818cf8 100%)`
- Rosa sulla notte: `radial-gradient(circle at 30% 30%, #f472b6 0%, #9333ea 35%, #1e1033 75%)`
- Brace: `radial-gradient(circle at 70% 75%, #facc15 0%, #f97316 30%, #7c2d12 70%)`
- Salita cobalto: `linear-gradient(180deg, #0f172a 0%, #2563eb 50%, #38bdf8 100%)`
- Corallo e oro, oklch: `linear-gradient(90deg in oklch, oklch(65% 0.24 20) 0%, oklch(78% 0.17 75) 100%)`

Ogni sfumatura attraversa tonalità vicine diventando più chiara o più scura, ed è questo che la tiene pulita. L’ultima è scritta in oklch e richiede un browser recente.

## Perché alcuni gradienti brillanti vibrano

Metti un rosso saturo direttamente contro un blu saturo di luminosità simile e il confine sembra tremolare, come se i due colori non riuscissero a decidere quale sta davanti. I designer la chiamano vibrazione cromatica. È più forte sui bordi netti, nelle linee sottili e nel testo colorato, ed è il motivo per cui il testo rosso su fondo blu stanca tanto da leggere. I colori in sé vanno bene; a causarla è la combinazione di tonalità opposta e pari luminosità, a contatto.

- Vibra: bordo netto, stessa luminosità: `linear-gradient(90deg, #ff2a2a 0%, #ff2a2a 50%, #1f8fff 50%, #1f8fff 100%)`
- Calmo: un passaggio scuro nel mezzo: `linear-gradient(90deg, #ff2a2a 0%, #7f1d1d 42%, #0c3a66 58%, #1f8fff 100%)`

Lo stesso rosso e lo stesso blu. A sinistra si toccano alla stessa luminosità e il bordo sfarfalla; a destra un passaggio profondo li separa ed entrambi i colori sembrano più forti.

Ci sono due rimedi. Tieni i colori distanti con un passaggio più scuro o più chiaro in mezzo, come a destra, oppure scegli colori vicini invece di opposti. [Colori complementari](https://gradiently.design/it/guide/complementary-colors) spiega quando gli opposti valgono la fatica.

## Regole per creare il tuo gradiente vivace

| Regola | Perché | Esempio |
| --- | --- | --- |
| Resta dentro un terzo della ruota | I colori vicini si fondono senza passare dal grigio | Indaco, viola, magenta |
| Dosa la luminosità | Dà profondità e fa smettere ai bordi di vibrare | Da `#1d4ed8` profondo a `#38bdf8` brillante |
| Usa un colore protagonista | Tre colori ugualmente forti litigano | Il magenta fa il picco; il resto lo sostiene |
| Aggiungi un fondo | Una zona scura o neutra fa riposare l’occhio | Rosa sulla notte, brace |
| Sfuma in oklch | Tiene saturo il punto medio, senza spegnerlo | Corallo e oro, oklch |

Cinque regole dietro ogni codice qui sopra. Infrangine una di proposito, mai per caso.

Il fango è l’altro modo in cui i gradienti brillanti falliscono. Sfuma due opposti saturi in semplice sRGB e il colore a metà scivola verso il grigio, come spiegano [gradienti fangosi](https://gradiently.design/it/guide/muddy-gradients) e, a un livello più tecnico, [interpolazione dei gradienti](https://gradiently.design/it/guide/gradient-interpolation). La saturazione stessa è una manopola, non un interruttore; [saturazione nel design](https://gradiently.design/it/guide/color-saturation) mostra come regolarla.

## Gradienti vivaci in CSS

I browser moderni possono sfumare in uno spazio colore percettivo aggiungendo `in oklch` al gradiente. Così il centro di una sfumatura ampia resta vivido quanto i suoi estremi. Dai prima ai browser più vecchi una versione in esadecimale.

```css
.hero {
  /* fallback: neighbouring hues, stepped lightness */
  background: linear-gradient(135deg, #1d4ed8 0%, #6d28d9 50%, #db2777 100%);
}

@supports (background: linear-gradient(in oklch, red, blue)) {
  .hero {
    background: linear-gradient(135deg in oklch, #1d4ed8 0%, #db2777 100%);
  }
}

.hero h1 {
  color: #ffffff; /* white or near black, never another saturated colour */
}
```

Il gradiente Ultra con un fallback a tre stop e una versione oklch a due stop che resta vivida al centro senza uno stop d'aiuto.

## Dove i gradienti vivaci funzionano meglio

Il colore vivace si guadagna l’attenzione, quindi spendilo dove l’attenzione è tutto il lavoro: un feed che scorre, una miniatura tra venti altre, un poster dall’altra parte della strada. Funziona meno dove la gente deve leggere a lungo, come documenti, dashboard e articoli lunghi, dove un campo saturo stanca l’occhio in poche righe. Lì, limita il gradiente vivace a un’intestazione o a un solo pulsante e lascia che una superficie calma regga il resto.

| Uso | Prova | Dimensione |
| --- | --- | --- |
| Post di saldi o di lancio | Mango, Fenicottero | 1080×1350 |
| Miniatura YouTube | Viola elettrico, Brace | 1280×720 |
| Hero di app o prodotto | Laguna, Ghiacciaio | 1920×1080 |
| Copertina di storia o Reel | Gazzosa al lime, Ciliegia pop | 1080×1920 |
| Copertina di playlist | Rosa sulla notte, Ultra | 1080×1080 |
| Poster A4 per eventi | Ultra, Salita cobalto | 2480×3508 |

Sei posti in cui i gradienti vivaci rendono, con codici dalla griglia qui sopra e la dimensione a cui progettare.

La stampa è l’unico posto dove aspettarsi uno shock. I colori più brillanti dello schermo, soprattutto blu elettrici, rosa acceso e verdi acidi, stanno fuori da ciò che gli inchiostri CMYK riescono a riprodurre e su carta tornano nettamente più spenti. [RGB e CMYK](https://gradiently.design/it/guide/rgb-vs-cmyk) spiega perché; scegli tu versioni un po' più profonde e ordina una prova prima della tiratura.

## Le parole su un gradiente vivace

Gli sfondi saturi oscillano di luminosità da un capo all’altro, quindi un solo colore di testo che si legge all’estremo scuro può sparire a quello chiaro. Usa solo bianco o nero quasi pieno, metti il titolo dove il gradiente è più profondo o più pallido e controlla il contrasto nel punto peggiore, non nella media. [Contrasto dei colori e accessibilità](https://gradiently.design/it/guide/color-contrast-accessibility) ha i numeri a cui puntare.

Un post verticale per i saldi con testo in grassetto su uno sfondo brillante e saturo

Uno sfondo forte con un testo semplice e pesante. Vende il colore; alle parole basta essere leggibili.

Qui un Mark di Gradiently aiuta con il colore acceso: sa dove sono le parole, approfondisce o alleggerisce il colore vicino alle lettere e l’inchiostro automatico sceglie testo chiaro o scuro riga per riga dalla propria palette. Un aspetto saturo resta leggibile a ogni dimensione senza un riquadro o un’ombra dietro il titolo. Per gli effetti neon, vedi [gradienti neon](https://gradiently.design/it/guide/neon-gradients); per l’estremo opposto della manopola, [gradienti sottili](https://gradiently.design/it/guide/subtle-gradients).

## FAQ

### Cosa rende vivace un gradiente?

Colori molto saturi, vicini tra loro sulla ruota dei colori, con un cambio chiaro di luminosità da un capo all’altro.

### Perché alcune combinazioni di colori brillanti fanno male agli occhi?

Tonalità opposte di luminosità simile accostate bordo a bordo sembrano sfarfallare. Separale con un passaggio più scuro o più chiaro, oppure scegli colori vicini.

### Come evito che un gradiente brillante diventi grigio al centro?

Usa tonalità vicine, aggiungi uno stop centrale oppure sfuma in oklch con `linear-gradient(in oklch, ...)` nei browser che lo supportano.

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

Bianco o nero quasi pieno. Controlla il contrasto nel punto più chiaro e più scuro dietro le parole, non solo al centro.

### Qual è un buon gradiente vivace per l’hero di un sito?

Prova `linear-gradient(135deg, #1d4ed8 0%, #6d28d9 50%, #db2777 100%)` con testo bianco.