Generatore di gradienti CSS

Crea gradienti CSS lineari o radiali con anteprima live e codice pronto. Gratis e senza registrazione.

Come creare un gradiente CSS

Un gradiente CSS crea una transizione morbida tra due o più colori, usata spesso per sfondi di sezioni, pulsanti e card. Scegli il tipo (lineare o radiale), i due colori e, per i gradienti lineari, l'angolazione: l'anteprima e il codice si aggiornano subito.

Cerchi anche un'ombra da abbinare? Prova il generatore di box-shadow CSS.

Gradienti lineari e radiali: la differenza

Un gradiente lineare sfuma i colori lungo una direzione precisa (in alto, in basso, in diagonale), utile per sfondi, pulsanti e intestazioni con un effetto di movimento direzionale. Un gradiente radiale parte da un punto centrale e si espande verso l'esterno in cerchi concentrici, spesso usato per effetti di luce, evidenziazioni o sfondi con un punto focale.

Perché usare un generatore invece di scrivere il CSS a mano

La sintassi CSS dei gradienti (angoli in gradi, percentuali di colore, punti di interruzione multipli) è facile da sbagliare a mente, e piccoli errori producono transizioni di colore innaturali o brusche. Vedere l'anteprima dal vivo mentre regoli i parametri permette di ottenere esattamente l'effetto voluto prima di copiare il codice finale nel proprio progetto.

Domande frequenti

Come si crea un gradiente CSS?
Con la proprietà background si può usare linear-gradient() per un gradiente lineare o radial-gradient() per uno radiale, indicando due o più colori. Questo strumento genera il codice automaticamente in base ai colori e all'angolazione scelti.
Che differenza c'è tra gradiente lineare e radiale?
Il gradiente lineare passa da un colore all'altro lungo una direzione (l'angolo che imposti). Il gradiente radiale parte dal centro e si espande verso l'esterno in modo circolare.
Cosa significa l'angolo del gradiente lineare?
L'angolo indica la direzione del passaggio di colore: 0deg va dal basso verso l'alto (i browser lo interpretano così in CSS), 90deg da sinistra a destra, 180deg dall'alto verso il basso. Puoi regolarlo liberamente da 0 a 360 gradi.
Il codice generato funziona su tutti i browser moderni?
Sì, linear-gradient() e radial-gradient() sono supportati nativamente da tutti i browser moderni senza bisogno di prefissi vendor.

Quanto è utile questo strumento?

Sii il primo a votare

Tool correlati