Generatore di gradienti CSS
Progetta sfondi sfumati trascinando i punti di colore su una barra, scegli il tipo (lineare, radiale o conico) e copia un CSS pronto per la produzione, con colore di fallback e versione moderna in OKLCH senza zone grigie.
Elaborato al 100% nel tuo browser
Ctrl + Enter eseguiCtrl + C copia risultato
Come si usa
- 1Scegli il tipo di gradiente e regola l’angolo o il centro.
- 2Trascina i punti lungo la barra; fai clic sulla barra per aggiungerne uno.
- 3Seleziona un punto per cambiarne il colore o la posizione esatta.
- 4Copia il CSS o condividi un link al tuo gradiente.
Casi d’uso
- Sfondi per sezioni hero, card e pulsanti.
- Sovrapposizioni di colore sulle immagini.
- Grafici a torta e ruote cromatiche con conic-gradient.
- Provare combinazioni di colori del brand prima di portarle in Figma o nel codice.
Domande frequenti
Che differenza c’è tra gradiente lineare, radiale e conico?
Il lineare procede in linea retta secondo un angolo; il radiale si espande da un centro come cerchio o ellisse; il conico ruota attorno a un punto come le lancette di un orologio, ideale per i grafici a torta.
Cosa aggiunge l’interpolazione in OKLCH?
Mescolando i colori in sRGB, il centro di alcuni gradienti (ad esempio dal blu al giallo) diventa grigiastro. Interpolando in OKLCH la transizione resta vivace. Il CSS include una riga sRGB di fallback per i browser più vecchi.
Servono prefissi come -webkit-?
No. linear-gradient, radial-gradient e conic-gradient funzionano senza prefissi in tutti i browser attuali. È incluso anche un colore pieno di fallback.
Posso condividere o salvare un gradiente?
Sì. Le impostazioni sono nell’URL: copia il link con «Condividi» e chi lo apre vedrà esattamente lo stesso gradiente.