Come funziona
Scegli un tipo di gradiente, un angolo e due o tre colori con le loro posizioni. L'anteprima si aggiorna all'istante e ottieni codice CSS pronto da incollare più un PNG da 1920 × 1080 per presentazioni, sfondi e post sui social.
background: linear-gradient(135deg, #2459e0 0%, #f2b33d 100%);
Tipi di gradiente
- Lineare: i colori sfumano lungo una linea retta con l'angolo impostato (0° = dal basso verso l'alto, 90° = da sinistra a destra).
- Radiale: i colori si diffondono in cerchio a partire dal centro.
- Conico: i colori ruotano attorno al centro come una ruota dei colori o un grafico a torta.
Consigli
- I colori vicini sulla ruota dei colori sfumano in modo più morbido rispetto a quelli opposti.
- Per mantenere leggibile il testo sui gradienti, controlla il contrasto a entrambe le estremità.
- Tutti i browser moderni supportano questi gradienti CSS senza prefissi.
Standard e fonti
- La sintassi dei gradienti segue i CSS Images Module Level 3 e 4 (W3C)
Ultima revisione 7 ottobre 2026
Domande frequenti
Come creo un gradiente CSS?
Scegli un tipo, imposta angolo e colori, poi copia la riga “background” generata nel tuo foglio di stile.
Cosa indica l'angolo?
Nei gradienti lineari, 0° va dal basso verso l'alto, 90° da sinistra a destra e 180° dall'alto verso il basso.
Posso usare più di due colori?
Sì. Spunta “Aggiungi un colore intermedio” per aggiungere un terzo punto di colore con una posizione propria.
Posso scaricare il gradiente come immagine?
Sì. “Scarica PNG” salva un'immagine da 1920 × 1080, pronta per presentazioni, sfondi o social.
Questi gradienti funzionano in tutti i browser?
I gradienti lineari e radiali funzionano ovunque; quelli conici funzionano in tutte le versioni attuali di Chrome, Edge, Firefox e Safari.