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.

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