Scrivere a mano la sintassi di un gradiente è complicato: angolo, ordine degli stop e posizioni percentuali interagiscono tra loro, e un refuso rompe silenziosamente l'intero background. Questo generatore mantiene anteprima e codice sempre allineati: quello che vedi è, byte per byte, il CSS che copi. Funziona interamente lato client, quindi nulla di ciò che progetti viene caricato altrove.
Generatore di gradienti CSS gratis
Funziona interamente nel browser: nessun caricamento, nessuna registrazione.
Tipo
Stop di colore
Codice CSS
Cos'è un generatore di gradienti CSS?
Un generatore di gradienti CSS è uno strumento visivo che crea il codice linear-gradient(), radial-gradient() o conic-gradient() al posto tuo. Scegli i colori, trascina gli stop, imposta l'angolo e copia CSS pronto da incollare mentre un'anteprima live mostra esattamente cosa renderizzerà il browser. Tutto funziona nel tuo browser.
Come si usa
- 1Scegli un tipo di gradiente. Scegli lineare, radiale o conico. Il lineare mostra uno slider dell'angolo; il radiale aggiunge forma (cerchio o ellisse) e posizione; il conico ha un angolo di partenza e una posizione.
- 2Imposta i tuoi stop di colore. Clicca ogni swatch per scegliere un colore e trascina il relativo slider per spostare lo stop lungo il gradiente. Aggiungi fino a 8 stop, oppure rimuovili fino a un minimo di 2.
- 3Regola la direzione. Trascina lo slider dell'angolo (0-360 gradi) o scegli una parola chiave di posizione. L'anteprima si aggiorna live a ogni modifica.
- 4Copia il CSS. Premi Copia per prendere la dichiarazione background, inclusa una riga di fallback a colore solido, e incollala nel tuo foglio di stile.
A chi serve
- Sviluppatori front-end che devono creare uno sfondo per hero, card o pulsante e vogliono la riga
linear-gradient()esatta senza memorizzare la sintassi. - Web e UI designer che devono replicare un mockup: ricreano il gradiente visivamente e passano il CSS generato direttamente al team di sviluppo.
- Chi crea email e landing page e ha bisogno di una riga di fallback a colore solido perché il design degradi bene nei client vecchi - l'output la include automaticamente.
- Studenti che imparano il CSS e vogliono vedere in tempo reale come angolo, stop di colore e tipo di gradiente cambiano il risultato renderizzato.
Domande frequenti
Questo generatore di gradienti CSS è gratis?
Sì - completamente gratis, senza registrazione, senza watermark, senza limiti. Crea tutti i gradienti che vuoi e copia il CSS direttamente nel tuo progetto.
Viene caricato qualcosa su un server?
No. Il gradiente viene creato e visualizzato in anteprima interamente nel tuo browser con semplice JavaScript. Nessun colore, codice o dato d'uso viene inviato da nessuna parte.
Qual è la differenza tra gradienti lineari, radiali e conici?
Un gradiente lineare fonde i colori lungo una linea retta a un angolo scelto da te. Un gradiente radiale si irradia da un punto centrale a forma di cerchio o ellisse. Un gradiente conico ruota i colori attorno a un punto centrale, come una ruota dei colori o un grafico a torta.
Come funzionano gli stop di colore nei gradienti CSS?
Ogni stop abbina un colore a una posizione tra 0% e 100% lungo la linea del gradiente. Il browser sfuma gradualmente tra gli stop vicini. Posizionare due stop nello stesso punto crea un bordo netto invece di una sfumatura - utile per righe o effetti a grafico a torta.
Quali browser supportano questi gradienti?
Tutti i browser moderni - Chrome, Firefox, Safari ed Edge - supportano linear-gradient() e radial-gradient() senza prefisso; conic-gradient() è supportato ovunque dal 2020. Il codice copiato include anche un fallback a colore solido per i browser più vecchi.
Posso usare il gradiente generato come colore del testo?
Non direttamente: i gradienti sono immagini, non colori. Applica il gradiente come background-image sull'elemento di testo, poi aggiungi background-clip: text e color: transparent così il gradiente traspare attraverso le lettere.
Perché il mio gradiente mostra delle bande?
Le bande compaiono quando due stop distanti fondono colori lungo un tratto lungo di tonalità simili, rivelando i gradini di colore a 8 bit. Riducile aggiungendo uno stop di colore intermedio, accorciando la distanza della sfumatura o scegliendo colori che differiscono anche in luminosità, non solo in tonalità.