# Generatore di gradienti CSS: scrivili a mano o con uno strumento

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

Il codice di gradiente generato di solito si incolla senza problemi ed è un po' datato. Impara le quattro parti di un gradiente e ne scrivi uno più in fretta di quanto trovi un generatore, poi lo rifinisci come nessun cursore permette.

## The short version

- Un generatore di gradienti CSS trasforma le scelte di colore e angolo in un valore background-image da incollare in un foglio di stile.
- Ogni gradiente CSS ha quattro parti: un tipo, una direzione o posizione, uno spazio colore di interpolazione facoltativo e un elenco di punti colore.
- I generatori più vecchi producono ancora prefissi dei fornitori e filtri legacy di Internet Explorer, che i browser moderni non richiedono.
- Aggiungere un terzo punto colore, uno spazio di interpolazione come oklch o un secondo livello di solito migliora l'output generato più che cambiare i colori.
- Salvare un gradiente finito in una proprietà personalizzata lo rende riutilizzabile in tutto il sito e facile da cambiare in un solo punto.

Un **generatore di gradienti CSS** ti dà un valore da incollare, come `linear-gradient(135deg, #1e1b4b 0%, #6d28d9 100%)`, dopo che hai scelto i colori e un angolo. È un ottimo punto di partenza. Ma un gradiente CSS è abbastanza breve da scriverlo a mano in meno di un minuto, ed è nel codice scritto a mano che stanno i miglioramenti: un terzo punto, uno spazio colore migliore, un secondo livello. Questa pagina mostra come leggere l'output di un generatore, ripulirlo e scrivere il tuo.

## Le quattro parti di ogni gradiente CSS

```css
.hero {
  background-image: linear-gradient(
    160deg            /* 1. direction: an angle or "to right" */
    in oklch,         /* 2. optional: the colour space to blend in */
    #1e1b4b 0%,       /* 3. colour stops: colour and position */
    #6d28d9 55%,
    #f472b6 100%
  );
}

/* 4. the type: linear, radial or conic */
.glow { background-image: radial-gradient(circle at 80% 20%, #f472b6, #1e1b4b 70%); }
.dial { background-image: conic-gradient(from 90deg, #6d28d9, #f472b6, #6d28d9); }
```

Tutto ciò che controllano i cursori di un generatore corrisponde a una di queste quattro parti.

| Parte | Opzioni | Predefinito se omessa |
| --- | --- | --- |
| Tipo | `linear`, `radial`, `conic`, più le versioni `repeating` | Nessuno, devi sceglierlo |
| Direzione o posizione | `160deg`, `to top right`, `circle at 80% 20%`, `from 90deg` | Dall'alto in basso; ellisse centrata; da 0deg |
| Spazio colore | `in oklab`, `in oklch`, `in srgb` e altri | sRGB per i colori esadecimali |
| Punti colore | Qualsiasi colore, con posizioni facoltative in percentuale o lunghezza | Distribuiti in modo uniforme da 0% a 100% |

I valori predefiniti spiegano perché tanti gradienti generati si assomigliano: due punti, distribuiti in modo uniforme, miscelati in sRGB.

Ogni tipo ha la sua guida: [gradienti lineari](https://gradiently.design/it/guide/css-linear-gradient), [gradienti radiali](https://gradiently.design/it/guide/css-radial-gradient) e [gradienti conici](https://gradiently.design/it/guide/css-conic-gradient).

## Ricette di gradienti da copiare

Sono scritte a mano, non generate, e ognuna usa un'idea che un generatore semplice raramente ti dà: una luce fuori centro, tre punti invece di due o uno spazio colore scelto. Clicca su uno qualsiasi per copiarlo.

- Crepuscolo, tre punti: `linear-gradient(160deg, #1e1b4b 0%, #6d28d9 50%, #f472b6 100%)`
- Vetro marino: `linear-gradient(135deg, #ecfeff 0%, #99f6e4 50%, #2dd4bf 100%)`
- Brace nell'angolo: `radial-gradient(circle at 85% 15%, #fb923c 0%, #9a3412 35%, #1c0a05 75%)`
- Carta morbida: `linear-gradient(180deg, #fdf6ec 0%, #f5e6d3 100%)`
- Verde boreale: `radial-gradient(ellipse at 30% 70%, #34d399 0%, #0f766e 40%, #042f2e 80%)`
- Viola e arancio via rosa: `linear-gradient(90deg in oklch, #7c3aed, #f97316)`

L'ultimo ha solo due punti, ma la miscela in oklch porta la tonalità attraverso un rosa vivido, dove l'sRGB dà un malva più spento. I browser senza supporto agli spazi colore ripiegano su nessun gradiente, quindi dichiara prima un gradiente semplice.

## Come ripulire l'output di un generatore

Incolla da un generatore vecchio e potresti ottenere cinque righe dove ne basta una. I gradienti con prefisso e il filtro di Internet Explorer sono superflui da anni; aggiungono peso e, nel caso della vecchia sintassi `-webkit-`, usano un sistema di angoli diverso che confonde chiunque modifichi dopo.

### Output vecchio tipico

- `background: #1e1b4b;` poi tre copie con prefisso
- `-webkit-linear-gradient(left, ...)` con le vecchie regole sugli angoli
- `filter: progid:DXImageTransform...` per Internet Explorer
- `rgba(30, 27, 75, 1)` per colori totalmente opachi

### Codice moderno pulito

- Un solo `background-color` di riserva
- Un solo `linear-gradient()` senza prefissi
- Nessun filtro
- Esadecimale breve o `rgb(30 27 75 / 0.5)` solo dove conta l'alfa

```css
.hero {
  background-color: #1e1b4b; /* shows while loading and if the gradient fails */
  background-image: linear-gradient(160deg, #1e1b4b 0%, #6d28d9 55%, #f472b6 100%);
}
```

Tutto ciò che l'output di un vecchio generatore cercava di dire, in due righe.

Anche il tuo browser è un discreto generatore. Apri gli strumenti per sviluppatori, seleziona l'elemento e clicca su una qualsiasi campionatura di colore dentro il gradiente nel pannello Stili: ottieni un selettore di colore per quel punto e puoi modificare angoli e percentuali sul posto mentre la pagina si aggiorna in tempo reale. Copia il valore finito nel tuo foglio di stile. Per mettere a punto un gradiente su contenuti reali è meglio di qualsiasi strumento a parte, perché lo vedi dietro il tuo titolo vero.

## Cinque modifiche che battono qualsiasi cursore

1. **Aggiungi un punto centrale** Due punti danno una rampa dritta. Un terzo colore intorno al 50-60 percento aggiunge profondità e ti fa controllare dove avviene il cambio.
2. **Scegli lo spazio colore** Aggiungi `in oklab` per mantenere puliti i passaggi tra colori lontani, o `in oklch` per far viaggiare la tonalità. [L'interpolazione dei gradienti](https://gradiently.design/it/guide/gradient-interpolation) mostra la differenza.
3. **Sposta la luce fuori centro** Sostituisci un gradiente lineare con `radial-gradient(circle at 80% 20%, ...)` così il colore più luminoso arriva da un angolo, come una sorgente di luce.
4. **Sovrapponi due o tre gradienti** Separa più valori con la virgola in `background-image`. Bagliori radiali su una base lineare sembrano molto più ricchi di un solo gradiente; i [gradienti mesh in CSS](https://gradiently.design/it/guide/css-mesh-gradient) vanno oltre.
5. **Aggiungi un po' di grana** Un leggero livello di rumore nasconde le bande sui gradienti grandi e scuri. Il codice è in [texture a rumore in CSS](https://gradiently.design/it/guide/css-noise-texture).

```css
.hero {
  background-color: #0f0b1e;
  background-image:
    radial-gradient(circle at 80% 15%, #f472b6 0%, transparent 40%),
    radial-gradient(circle at 15% 85%, #4338ca 0%, transparent 45%),
    linear-gradient(160deg, #0f0b1e 0%, #1e1640 100%);
}
```

Tre livelli scritti a mano: una luce rosa in alto a destra, una pozza indaco in basso a sinistra, una base scura. Il primo livello elencato sta sopra.

## Trasformare un gradiente in un token riutilizzabile

Quando un gradiente è giusto, dagli un nome. Una proprietà personalizzata contiene l'intero valore, così pulsanti, banner e hero possono condividerlo e un restyling tocca una sola riga. [Variabili CSS per i temi](https://gradiently.design/it/guide/css-custom-properties-theming) mostra come cambiare i token di gradiente per brand o modalità.

```css
:root {
  --gradient-brand: linear-gradient(160deg, #1e1b4b 0%, #6d28d9 55%, #f472b6 100%);
}

.hero { background-image: var(--gradient-brand); }
.badge { background-image: var(--gradient-brand); }
```

Una sola definizione, usata ovunque. Se i colori cambiano, nient'altro nel foglio di stile deve cambiare.

## Quando un generatore non è lo strumento giusto

Generatori e CSS scritto a mano hanno lo stesso limite: il risultato è un elenco di punti che chiunque può leggere nel tuo foglio di stile e riutilizzare. Va bene per i dettagli dell'interfaccia. Per lo sfondo con cui ti riconoscono, sul tuo sito e in ogni post, forse vuoi qualcosa di più ricco e più difficile da copiare. Il consiglio più ampio è in [come usare un generatore di gradienti](https://gradiently.design/it/guide/gradient-generator).

I Mark di Gradiently vanno oltre ciò che il CSS sa descrivere: materiali sovrapposti, luce, grana e movimento, resi in tempo reale a ogni dimensione, con un solo proprietario alla volta. Puoi progettare con qualsiasi Mark non ancora riservato gratis e cercare nel Mercato con parole di colore per trovarne uno vicino al gradiente che stavi cercando di scrivere.

## FAQ

### Che cos'è un generatore di gradienti CSS?

Uno strumento che ti fa scegliere visivamente colori, angolo e tipo, poi produce un valore `linear-gradient()`, `radial-gradient()` o `conic-gradient()` da incollare nel CSS.

### Servono ancora i prefissi -webkit- per i gradienti CSS?

No. I gradienti senza prefisso funzionano in tutti i browser attuali. Rimuovi dal codice generato le copie con prefisso e i vecchi filtri di Internet Explorer.

### Come scrivo a mano un gradiente CSS?

Scegli un tipo, una direzione e due o più punti colore: `linear-gradient(160deg, #1e1b4b, #6d28d9 55%, #f472b6)`.

### Perché il mio gradiente generato sembra sporco al centro?

Viene miscelato in sRGB, che ingrigisce tra colori lontani. Aggiungi `in oklab` dopo l'angolo, oppure aggiungi un punto centrale con un colore più pulito.

### Come riutilizzo un gradiente in tutto un sito web?

Salva l'intero gradiente in una proprietà personalizzata come `--gradient-brand` e usa `var(--gradient-brand)` dove serve.