# Usare un generatore di gradienti senza somigliare agli altri

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

I generatori di gradienti sono veloci e utili, e tendono tutti a produrre gli stessi pochi look. La soluzione non è un generatore migliore, ma ciò che fai nei cinque minuti dopo aver premuto il pulsante.

## The short version

- Un generatore di gradienti sceglie per te colori, direzione e arresti, poi esporta CSS o un’immagine.
- La maggior parte dei risultati si somiglia perché condivide gli stessi valori predefiniti: due arresti, un angolo diagonale e colori molto saturi.
- Partire dai propri colori invece che da una palette casuale o di tendenza è il cambiamento singolo più grande che puoi fare.
- Aggiungere un terzo arresto, cambiare l’interpolazione, adattare la direzione al layout e aggiungere grana trasformano un risultato generico in uno specifico.
- Prova sempre un gradiente generato con testo reale a dimensione reale prima di usarlo.

Un **generatore di gradienti** è uno strumento che costruisce un gradiente per te: scegli o estrai a caso i colori, imposti una direzione ed esporta codice CSS o un’immagine. È il modo più veloce per ottenere una bella sfumatura. È anche il motivo per cui tanti siti, post e presentazioni condividono gli stessi sfondi dal viola al rosa o dal blu al ciano. Il problema non è il generatore. È usare la sua prima risposta.

Questa guida spiega perché i risultati dei generatori convergono e ti accompagna in sei modifiche che rendono un risultato tuo. Per alcune ti serviranno le basi dei [gradienti lineari in CSS](https://gradiently.design/it/guide/css-linear-gradient).

## Cosa fa davvero un generatore di gradienti

La maggior parte dei generatori fa tre cose. Sceglie due o più colori, da un selettore, da un’estrazione casuale o da una libreria di palette popolari. Imposta un tipo e una direzione, di solito lineare a un certo angolo. E scrive il codice, di solito un solo valore `linear-gradient()`, a volte con un’esportazione in PNG o SVG. Alcuni strumenti più recenti creano gradienti mesh o a macchie, e alcuni accettano un prompt di testo.

Un risultato da generatore che conosci già: `linear-gradient(135deg, #667eea 0%, #764ba2 100%)`

Due arresti saturi a 135 gradi. Bello, e condiviso da un numero altissimo di pagine.

## Perché i risultati dei generatori si somigliano tutti

- **Due arresti di default.** Le sfumature a due colori sono le più semplici da generare e le più facili da riconoscere come generiche.
- **Lo stesso angolo.** 135 gradi, da in alto a sinistra a in basso a destra, è un valore predefinito comune e non si adatta a quasi niente in particolare.
- **Palette popolari.** Le librerie mettono in evidenza per prime le combinazioni più copiate, quindi i gradienti più usati vengono usati ancora di più.
- **Saturazione al massimo.** I selettori casuali e i preset tendono ai colori vivaci, che fanno colpo in una miniatura e risultano aspri dietro il testo.
- **Nessun materiale.** Un gradiente nudo è liscio, digitale e piatto. Quasi ogni gradiente generato condivide questa finitura.

Nessuna di queste cose è sbagliata di per sé. Insieme producono un aspetto che appartiene a tutti, il contrario di ciò che serve a un brand. Il [branding con i gradienti](https://gradiently.design/it/guide/gradient-branding) spiega perché conta oltre il gusto.

## Sei modifiche che rendono tuo un gradiente generato

1. **Parti dai tuoi colori** Incolla i colori del tuo brand, o colori prelevati da una foto che ti piace, invece di estrarne a caso. [Ricavare una palette da un’immagine](https://gradiently.design/it/guide/color-palette-from-image) è una buona fonte.
2. **Aggiungi un terzo arresto e spostalo** Un colore centrale affine al 40% o al 60%, non al 50%, dà forma alla sfumatura. Ora la sfumatura pende da un lato, e si legge come luce e non come riempimento.
3. **Cambia l’interpolazione** Sfumare in OKLCH mantiene vivi i colori al centro ed evita le macchie grigie. Vedi i [gradienti OKLCH](https://gradiently.design/it/guide/css-gradient-oklch).
4. **Adatta la direzione al layout** Punta la luce dove sta il contenuto. Una caduta verticale si adatta a una storia, un orizzonte basso a un banner, un alone radiale a una foto di prodotto.
5. **Aggiungi grana o un materiale** Uno strato di rumore fine nasconde il banding e dà tessitura alla superficie. È la via più rapida dal digitale al tattile.
6. **Ritaglia, non limitarti a riempire** Usa una sezione di un gradiente più grande, o ingrandiscilo perché si veda una sola transizione morbida. Ritagliare cambia la sensazione più che cambiare i colori.

- 1. Il risultato del generatore: `linear-gradient(135deg, #667eea 0%, #764ba2 100%)`
- 2. Colori tuoi, terzo arresto al 60%: `linear-gradient(135deg, #1e2a5a 0%, #4f46e5 60%, #c084fc 100%)`
- 3. OKLCH, in discesa dall’alto: `linear-gradient(in oklch 170deg, #1e2a5a 0%, #4f46e5 60%, #f0abfc 100%)`
- 4. Rimodellato come alone basso: `radial-gradient(circle at 70% 110%, #f0abfc 0%, #4f46e5 35%, #1e2a5a 70%, #0b1026 100%)`

Un solo gradiente generato, modificato quattro volte. Ogni passaggio richiede meno di un minuto e lo allontana un po’ di più dal valore predefinito.

## Dall’output del generatore al codice di produzione

I generatori spesso esportano più del necessario, o meno. Controlla il codice prima di incollarlo: i browser moderni non richiedono più i prefissi dei produttori per i gradienti, e conviene aggiungere un colore pieno di riserva per il raro caso in cui il gradiente non venga renderizzato.

```css
/* Edited generator output: solid fallback, own colours, OKLCH blend */
.hero {
  background-color: #1e2a5a;
  background-image: linear-gradient(in oklch 170deg, #1e2a5a 0%, #4f46e5 60%, #f0abfc 100%);
}
```

Il colore di sfondo compare se il gradiente non può essere renderizzato. I browser che non supportano la sintassi `in oklch` ignorano l’intera dichiarazione, quindi la riserva conta.

Se il gradiente andrà usato in un’email, come immagine social o in stampa, esporta un’immagine invece del CSS. Per le immagini, genera alla dimensione finale, aggiungi la grana prima di esportare e salva in PNG per evitare le fasce di compressione.

## Prova prima di pubblicare

### Provato nel generatore

- Un’anteprima quadrata piccola
- Nessun testo sopra
- Uno schermo, luminosità piena
- Giudicato da solo

### Provato nell’uso reale

- Il formato vero, a dimensione piena e da telefono
- Titoli e testi reali, con il contrasto verificato
- Ambienti chiari e scuri, più schermi
- Accanto ai tuoi altri design e a quelli dei concorrenti

La maggior parte dei gradienti fallisce sul contrasto, non sul colore. Metti sopra il tuo titolo vero e controllalo nel punto più chiaro dietro il testo. Il [testo su un gradiente](https://gradiently.design/it/guide/text-on-gradient) spiega come.

## Quando un generatore non basta

Un generatore ti dà il colore. Non ti dà una superficie con materiale, luce e movimento, e non può promettere che nessun altro stia usando lo stesso risultato. Se vuoi un gradiente che ti appartenga, ti serve qualcosa che lo confronti con quelli di tutti gli altri.

È così che funziona la Forge di Gradiently. Descrivi un look in una frase o costruiscilo controllo per controllo: fino a otto colori, fino a tre materiali sovrapposti, luce, grana e movimento. Prima che un nuovo Mark venga pubblicato, viene confrontato con tutti gli altri Mark, e ciò che gli somiglia troppo viene rifiutato. Il risultato viene renderizzato dal vivo dietro i tuoi design e può avere un solo proprietario.

Un Mark è un gradiente generato portato oltre: una ricetta completa, un codice pubblico e un solo proprietario.

## FAQ

### Cos’è un generatore di gradienti?

Un generatore di gradienti è uno strumento che costruisce un gradiente da colori scelti o casuali e da una direzione, poi lo esporta come codice CSS o come immagine.

### Perché i gradienti generati sembrano generici?

Quasi tutti condividono gli stessi valori predefiniti: due arresti molto saturi, un angolo diagonale, nessuna texture e colori da palette popolari. Cambiarne anche solo uno rende il risultato più distintivo.

### Servono i prefissi dei produttori per i gradienti CSS?

Non per i browser attuali. Basta un semplice valore linear-gradient(), e un background-color pieno prima di esso offre una riserva.

### Devo usare il CSS o un’immagine da un generatore di gradienti?

Usa il CSS per i siti web, dove è leggero e nitido a qualsiasi dimensione. Usa un’immagine esportata per email, post social e stampa.

### Come faccio un gradiente che nessun altro ha?

Parti dai tuoi colori, aggiungi un materiale o la grana e usali con coerenza. In Gradiently ogni nuovo Mark viene confrontato con tutti gli altri prima della pubblicazione e ha un solo proprietario alla volta.