Generatore di gradienti CSS

Cos'è Generatore di gradienti CSS?

Il Generatore di gradienti CSS è uno strumento gratuito nel browser per web designer e sviluppatori front-end che vogliono costruire gradienti in modo visivo invece di scrivere la sintassi a mano. Scegli lineare, radiale o conico — con una variante ripetuta facoltativa — poi modifica gli stop di colore su una barra di anteprima trascinabile o in righe per stop con campi colore HEX e posizione. I gradienti radiali offrono forma cerchio/ellisse, una parola chiave di dimensione (closest-side, closest-corner, farthest-side, farthest-corner) e un centro at X% Y%, mentre i conici accettano un angolo iniziale e un centro. Puoi impilare più livelli di gradiente in un unico sfondo separati da virgole, generare un gradiente casuale, applicare palette predefinite, ruotare la tonalità di ogni stop e copiare la regola background pronta da incollare.

Come usare Generatore di gradienti CSS

1. Scegli il tipo di gradiente — Lineare, Radiale o Conico — e attiva Ripetuto nelle opzioni per un motivo ripetuto.
2. Trascina gli stop lungo la barra di anteprima per riposizionarli, clicca un punto vuoto della barra per aggiungere uno stop, o fai doppio clic su uno stop per rimuoverlo.
3. Regola con precisione ogni stop con i suoi campi colore HEX e posizione, oppure usa il contagocce (dove supportato) per prelevare un colore dallo schermo.
4. Per i gradienti radiali imposta la forma (cerchio o ellisse), una parola chiave di dimensione e il centro X/Y; per i conici l'angolo iniziale e il centro.
5. Aggiungi altri livelli per impilare gradienti in un unico sfondo, prova Casuale, applica una palette o ruota tutte le tonalità in una volta.
6. Copia la regola CSS background generata e incollala nel tuo foglio di stile.

Esempi

Lineare, 90deg, #4f86f7 allo 0% e #9333ea al 100%

background: linear-gradient(90deg, #4f86f7 0%, #9333ea 100%);

Radiale, ellipse farthest-corner at 30% 30%, #ffffff 0%, #4f86f7 100%

background: radial-gradient(ellipse farthest-corner at 30% 30%, #ffffff 0%, #4f86f7 100%);

Livello 1 lineare 90deg; Livello 2 radiale circle at 50% 50%

background: linear-gradient(90deg, #4f86f7 0%, #9333ea 100%), radial-gradient(circle farthest-corner at 50% 50%, #ffffff88 0%, #ffffff00 100%);

Domande frequenti

Quali tipi di gradiente e opzioni sono supportati?

Gradienti lineari, radiali e conici, ognuno con una variante ripetuta facoltativa. Il radiale aggiunge forma cerchio/ellisse, una parola chiave di dimensione (closest-side, closest-corner, farthest-side, farthest-corner) e un centro at X% Y%; il conico aggiunge un angolo iniziale e un centro. Puoi anche impilare più livelli in un unico sfondo.

Come funziona la barra di stop trascinabile?

Trascina uno stop lungo la barra per cambiarne la posizione, clicca una parte vuota della barra per inserire un nuovo stop con colore interpolato e fai doppio clic su uno stop per rimuoverlo (ne restano almeno due). Ogni stop ha anche campi colore HEX e posizione sotto la barra.

Posso prelevare un colore dallo schermo?

Sì, nei browser che supportano l'API EyeDropper. Quando disponibile, accanto a ogni stop compare un pulsante contagocce; cliccalo e scegli qualsiasi pixel sullo schermo. Puoi sempre digitare un valore HEX o usare il chip di colore nativo.

Cosa fanno Casuale, le palette e ruota tonalità?

Casuale sostituisce il livello attivo con un nuovo gradiente casuale, le palette sostituiscono gli stop del livello attivo con un set di colori curato, e Ruota tonalità sposta la tonalità di ogni stop di ogni livello in una volta. Cambiano il gradiente solo quando li clicchi.

I miei colori o il mio CSS vengono caricati da qualche parte?

No. Il gradiente è costruito interamente nel tuo browser con calcoli locali di stringhe e colori — nessun colore, CSS o impostazione viene mai inviato a un server, quindi funziona offline e mantiene privato il tuo lavoro.