Generatore di gradienti CSS

Questo generatore di gradienti CSS costruisce gradienti lineari e radiali a partire da stop colore che controlli tu, con anteprima dal vivo e una dichiarazione background pronta da incollare. Trascina gli stop lungo la barra, imposta angolo o forma, e il CSS si aggiorna all’istante.

Tutto gira nel tuo browser con i colori e le impostazioni che scegli: non viene caricato nulla e puoi copiare il risultato e usarlo anche offline.

Un gradiente lineare sfuma i colori lungo una linea retta, e l’angolo ne definisce la direzione: 0 gradi punta in alto, 90 gradi a destra, 180 gradi in basso. Un gradiente radiale sfuma dal centro verso l’esterno, come cerchio o come ellisse.

Entrambi sono valori CSS standard, scritti come linear-gradient() e radial-gradient(), ed entrambi usano la stessa lista di stop colore: cambiando tipo mantieni i tuoi colori, cambia solo il modo in cui si diffondono.

Ogni stop colore è un colore posizionato tra 0% e 100%. Il gradiente sfuma dolcemente tra stop vicini, quindi la posizione di uno stop controlla dove il suo colore è più intenso e con quanta rapidità si fonde nel successivo.

Aggiungi tutti gli stop che ti servono per creare gradienti multicolore, trascinali per rifinire la sfumatura, oppure fai clic sulla barra per inserire un nuovo stop dove vuoi. Due stop sono il minimo necessario per un gradiente.

Copia il codice generato e incollalo come background di qualsiasi elemento, ad esempio una sezione, una card o un pulsante. I browser moderni supportano linear-gradient e radial-gradient senza prefissi, quindi il valore funziona così com’è.

Poiché un gradiente è solo un valore, puoi usarlo ovunque sia attesa un’immagine di sfondo, sovrapporlo a un colore pieno come fallback, o riutilizzare gli stessi stop in una versione lineare e in una radiale per un aspetto coerente.