Colori e design
Generatore di gradienti CSS
Componi il gradiente a occhio, copia il CSS in un clic.
Un bel gradiente dà profondità a uno sfondo, a un pulsante o a una sezione hero — ma trovare i colori e l’angolo giusti richiede tentativi. Questo editor ti lascia comporre visivamente: aggiungi da due a cinque punti colore, posizionali con precisione, regola l’angolo del gradiente lineare o passa alla modalità radiale. L’anteprima occupa tutto il riquadro e si aggiorna a ogni ritocco, esattamente come lo renderà il tuo browser. Quando il risultato ti convince, un clic copia la dichiarazione CSS completa (background: linear-gradient(…)), pronta da incollare in un foglio di stile, in un componente o in un’e-mail HTML. Nessuna registrazione: tutto avviene nel tuo browser.
Come funziona?
- Scegli il tipo di gradiente: lineare o radiale.
- Aggiungi i colori (da 2 a 5 punti) e posizionali.
- Regola l’angolo e affina a occhio con l’anteprima a tutto campo.
- Copia il codice CSS generato nel tuo foglio di stile.
Domande frequenti
Gradiente lineare o radiale: che differenza c’è?
Il lineare procede lungo una retta con l’angolo che scegli tu — ideale per sfondi e pulsanti. Il radiale si irradia dal centro verso l’esterno — perfetto per effetti alone o faro di luce.
Come ottengo un gradiente sobrio ed elegante?
Resta tra tonalità vicine sul cerchio cromatico e limita lo scarto di luminosità: due tinte simili battono quasi sempre un arcobaleno. Un angolo di 135° dà una diagonale naturale.
Il codice generato funziona ovunque?
Sì: linear-gradient() e radial-gradient() sono supportati da tutti i browser attuali, senza prefissi. Solo alcuni vecchi client di posta li ignorano — in quel caso prevedi un colore di sfondo di riserva.