Generatore di Gradienti
Il generatore di gradienti CSS crea gradienti lineari, radiali e conici da due o tre colori, con anteprima in tempo reale e CSS del background pronto da copiare.
Informazioni su questo strumento
Il generatore di gradienti CSS crea gradienti lineari, radiali e conici da due o tre colori, con anteprima in tempo reale e CSS del background pronto da copiare.
Come si usa
- Scegli il tipo di gradiente: lineare, radiale o conico.
- Imposta l'angolo con lo slider (0–360°).
- Scegli due colori, oppure spunta Use 3 colors per aggiungerne un terzo.
- Clicca Copy CSS e incolla la regola background nel tuo foglio di stile.
Da sapere
- linear-gradient() sfuma i colori lungo una linea retta definita da un angolo, dove 90deg va da sinistra a destra.
- radial-gradient(circle, …) diffonde i colori dal centro verso l'esterno.
- conic-gradient(from <angle>, …) fa ruotare i colori attorno a un punto centrale, utile per grafici a torta e ruote dei colori.
- I gradienti CSS sono immagini generate dal browser, quindi si adattano a qualsiasi dimensione senza appesantire i file.
- Tutte e tre le funzioni di gradiente sono supportate da tutti i principali browser attuali.
Funziona interamente nel tuo browser: nulla di ciò che inserisci viene caricato o salvato.
Domande frequenti
Come si crea un gradiente CSS?
Usa una funzione di gradiente come background, per esempio background: linear-gradient(135deg, #1db954, #0a1628). Questo strumento scrive quella riga per te a partire dai colori e dall'angolo che scegli.
Che differenza c'è tra gradienti lineari, radiali e conici?
I gradienti lineari cambiano colore lungo una linea, quelli radiali si irradiano da un punto centrale e quelli conici ruotano attorno a un centro come le lancette di un orologio.
Un gradiente può avere più di due colori?
Sì. I gradienti CSS accettano un numero qualsiasi di color stop. Questo generatore supporta due o tre colori; puoi aggiungere altri stop a mano nel CSS copiato.
I gradienti CSS rallentano un sito?
Non in modo percepibile. Vengono disegnati dal browser e non richiedono il download di immagini, quindi di solito sono più leggeri dei file immagine con gradienti.