Generatore di Gradienti CSS
Costruisci visivamente un valore CSS `linear-gradient()` o `radial-gradient()`. Aggiungi, rimuovi e riordina un numero qualsiasi di stop colore, imposta la posizione esatta di ogni stop da 0 a 100%, scegli un angolo per i gradienti lineari o una forma e posizione per quelli radiali, e osserva un riquadro di anteprima aggiornarsi in tempo reale. Quando il risultato ti convince, copia la dichiarazione `background:` pronta da incollare. Tutto viene assemblato con logica di stringhe nel tuo browser, senza che il CSS venga renderizzato lato server o caricato.
Verificato da Vincenzo Manto, Fondatore e Lead Developer · Ultimo aggiornamento 27 settembre 2026
Come funziona
- 1
Scegli Lineare o Radiale come tipo di gradiente.
- 2
Per il lineare, trascina il cursore dell'angolo; per il radiale, scegli una forma (cerchio/ellisse) e una posizione (es. centro, in alto a sinistra).
- 3
Aggiungi, rimuovi o riordina gli stop colore, e imposta il colore e la posizione (0-100%) di ciascuno. Usa 'Distribuisci uniformemente' per spaziarli automaticamente.
- 4
Osserva il riquadro di anteprima live aggiornarsi, poi copia la dichiarazione CSS `background:` generata.
Perché scrivere a mano la sintassi dei gradienti è soggetto a errori
Le funzioni gradiente CSS racchiudono molto in un'unica riga: direzione o forma, una posizione, e un elenco di colori separati da virgole ciascuno con la propria percentuale. È facile perdere il conto dell'ordine degli stop o dimenticare un simbolo di percentuale scrivendola a mano, specialmente con quattro o cinque stop.
Un costruttore visivo che produce esattamente ciò che scriveresti a mano
Questo strumento assembla la stessa sintassi `linear-gradient()`/`radial-gradient()` che scriveresti tu stesso, con un'interfaccia per riordinare gli stop, trascinare le posizioni e scegliere i colori, più un'anteprima live per vedere il risultato prima di inserirlo nel tuo foglio di stile.
Domande frequenti
Qual è la differenza tra gradienti lineari e radiali?
Un gradiente lineare fa transitare i colori lungo una linea retta a un dato angolo (0deg punta verso l'alto, 90deg verso destra per convenzione CSS). Un gradiente radiale fa transitare i colori verso l'esterno da un punto centrale in forma di cerchio o ellisse, utile per effetti spotlight o vignetta.
Posso usare più di due stop colore?
Sì. Aggiungi tutti gli stop che ti servono con il pulsante '+ Add stop'. Gli stop vengono resi nell'ordine di posizione indipendentemente dall'ordine in cui li hai aggiunti, coerentemente con come la specifica CSS risolve gli stop del gradiente.
Cosa fa 'Distribuisci uniformemente'?
Ricalcola la posizione di ogni stop in modo che siano spaziati a intervalli uguali da 0% a 100% in base al numero di stop attualmente presenti, un modo rapido per sistemare un gradiente dopo aver aggiunto o rimosso stop.
Posso incollare qualsiasi formato di colore CSS nel campo colore di uno stop?
Sì. Hex, `rgb()`, `hsl()`, `oklch()` o un colore CSS con nome funzionano tutti, poiché il generatore inserisce la stringa digitata direttamente nella funzione gradiente.
Questo gradiente viene renderizzato o caricato da qualche parte?
No. La stringa CSS viene assemblata da JavaScript puro nel tuo browser e l'anteprima viene renderizzata con uno stile `background-image` locale; niente viene inviato a un server.