Generatore di gradienti CSS
Scegli 2 o 3 colori, il tipo di gradiente e l'angolo: l'anteprima si aggiorna in tempo reale e il codice CSS è pronto da copiare.
Lineare o radiale: quale scegliere?
Un gradiente lineare sfuma i colori lungo una direzione: con 90° va da
sinistra a destra, con 180° dall'alto verso il basso. È la scelta tipica per sfondi di hero,
pulsanti e banner. Un gradiente radiale parte invece dal centro e si espande
in cerchio: funziona bene per effetti luce, sfondi morbidi e avatar. In entrambi i casi il
codice generato usa le funzioni native linear-gradient() e
radial-gradient(), supportate da tutti i browser moderni senza prefissi.
Come usare il codice generato
Copia la riga e incollala nel tuo CSS come valore della proprietà background
di qualsiasi elemento: un div, il body, una card. Con 3 colori il
browser distribuisce le tappe in modo uniforme (0%, 50%, 100%); se ti serve più controllo puoi
aggiungere a mano le percentuali dopo ogni colore, ad esempio #ff8a5c 20%. Un
trucco utile: due colori vicini tra loro creano sfumature eleganti, due colori opposti creano
contrasti forti adatti a call-to-action.