CSS Gradient Generator
Crea gradienti CSS lineari, radiali e conici con anteprima in tempo reale. Personalizza i color stop, scegli tra 20 preset pronti e copia il codice CSS direttamente nel tuo progetto.
Configurazione Gradiente
Color Stop2/10
- 0%
- 100%
Anteprima
Codice CSS
background: linear-gradient(to right, #667eea 0%, #764ba2 100%);Preset20 gradienti pronti
Come utilizzare CSS Gradient Generator
Scegli il tipo di gradiente
Seleziona tra gradiente lineare (linear), radiale (radial) o conico (conic) tramite le schede in alto. Ogni tipo offre opzioni di controllo diverse.
Configura la direzione o la forma
Per i gradienti lineari scegli la direzione o inserisci un angolo personalizzato (0-360°). Per i radiali seleziona la forma (cerchio o ellisse) e la posizione del centro. Per i conici imposta l'angolo di partenza.
Aggiungi e modifica i color stop
Ogni gradiente ha almeno 2 e al massimo 10 color stop. Per ciascuno puoi scegliere il colore tramite il color picker o inserendo il valore HEX, e definire la posizione in percentuale (0-100%).
Usa i preset pronti
Nella sezione preset trovi 20 gradienti pronti da usare: clicca su un preset per caricarlo e personalizzarlo ulteriormente.
Copia il codice CSS
Il codice CSS viene generato in tempo reale. Clicca "Copia CSS" per copiarlo negli appunti oppure attiva il prefisso -webkit- per compatibilità con browser più datati.
Suggerimenti
- Usa colori con luminosità simile per transizioni più morbide e professionali.
- Per i gradienti su testo usa background-clip: text e color: transparent nel tuo CSS.
- I gradienti conici sono ottimi per creare cerchi torta (pie charts) in puro CSS.
- Aggiungere un color stop uguale al precedente crea un cambio netto senza transizione.
Domande frequenti
Qual è la differenza tra gradiente lineare, radiale e conico?
Il gradiente lineare (linear-gradient) scorre lungo una linea retta da un punto all'altro. Quello radiale (radial-gradient) si espande da un centro verso l'esterno in forma circolare o ellittica. Quello conico (conic-gradient) ruota attorno a un punto centrale come i raggi di una ruota.
Cos'è un color stop?
Un color stop è un punto del gradiente in cui un colore specifico è definito al 100% della sua intensità. Tra due stop adiacenti il browser interpola automaticamente i colori. La posizione in % indica dove si trova lo stop lungo l'asse del gradiente.
Quando serve il prefisso -webkit-?
Il prefisso -webkit- era necessario per Safari e Chrome nelle versioni precedenti al 2013. Oggi la maggior parte dei browser supporta la sintassi standard senza prefisso. È buona pratica includerlo solo se si deve supportare Safari < 6 o Android Browser < 4.
Come funziona il generatore casuale?
Il pulsante "Casuale" genera un gradiente lineare con 2-4 colori scelti casualmente. L'angolo e le posizioni dei color stop vengono anch'essi randomizzati per produrre risultati sempre nuovi.
Posso usare questi gradienti con background-image?
Sì, la proprietà CSS corretta è background-image (o background come shorthand). Il codice generato include già la proprietà background nella forma corretta, pronta per essere incollata nel tuo CSS.
Come si crea un gradiente ripetuto?
CSS supporta anche repeating-linear-gradient, repeating-radial-gradient e repeating-conic-gradient. Questo strumento genera la versione non ripetuta, ma puoi sostituire "linear-gradient" con "repeating-linear-gradient" nel codice generato per ottenere l'effetto ripetuto.