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
What is the difference between linear, radial, and conic gradients?
Linear gradient runs along a straight line between two points. Radial gradient expands from the center outward in circular or elliptical shape. Conic gradient rotates around a central point like the spokes of a wheel.
What's a color stop?
A color stop is a point on the gradient where a specific color is defined at 100% of its intensity. Between two adjacent stops, the browser automatically interpolates colors. The percentage position indicates where the stop lies along the gradient axis.
When is the -webkit- prefix needed?
Prefix -webkit- was necessary for Safari and Chrome in versions prior to 2013. Most browsers now support standard syntax without prefix. It's a good practice to include it only if you need to support Safari < 6 or Android Browser < 4.
How does the random generator work?
Random button generates a linear gradient with 2-4 randomly chosen colors. The angle and positions of the color stops are also randomized to produce new results.
Can I use these gradients with a background image?
Yes, the correct CSS property is background-image (or background as a shorthand). The generated code already includes the background property in the correct format, ready to be pasted into your CSS.
How is a repeated gradient created?
CSS also supports repeating-linear-gradient, repeating-radial-gradient and repeating-conic-gradient. This tool generates the non-repeating version, but you can replace "linear-gradient" with "repeating-linear-gradient" in the generated code to get the repeated effect.