Sviluppo Web
CSS Gradient Generator
Comporre un gradiente lineare, radiale o conico da più colori e ottenere il CSS pronto.
0° — in alto, poi in senso orario.
A CSS gradient is a smooth transition between multiple colors, generated by the browser itself with no image needed. This tool lets you visually build a linear, radial, or conic gradient and copy the finished CSS instantly.
How to use it
- Add color stops and drag them to fine-tune where each transition happens.
- Pick a gradient type — linear (a direction in degrees), radial (shape and center position), or conic (rotation around a point).
- Copy the finished CSS with one click and paste it into background or background-image.
Common uses
- Picking a background for a hero section or button without opening a graphics editor.
- Recreating a gradient from a design mockup (Figma, etc.) in exact CSS syntax.
- Quickly experimenting with color transitions before locking a choice into a design system.
Things to keep in mind
A radial gradient defaults to stretching into the shape of its element (an ellipse), not always staying a circle — worth accounting for on rectangular blocks.
Multiple gradients can be layered by listing them comma-separated in background-image — it works like stacked layers, with the first one in the list on top.
Articolo su questo strumento: Gradienti CSS: in cosa linear differisce da radial e conic
Domande frequenti
Qual è la differenza tra gradienti lineari, radiali e conici?
I gradienti lineari transitano lungo una linea retta a un angolo scelto, i gradienti radiali si espandono verso l'esterno da un punto centrale come un cerchio o un'ellisse, e i gradienti conici spazzano i colori attorno a un punto centrale come una ruota dei colori.
I gradienti conici sono supportati in tutti i browser?
Tutti i browser principali attuali supportano i gradienti conici, ma è una funzionalità CSS più recente rispetto ai gradienti lineari o radiali, quindi versioni di browser molto vecchie potrebbero non renderizzarla.
Cosa ottengo come output?
Lo strumento genera sintassi CSS background pronta all'uso con i colori, gli stop e le posizioni scelti, che puoi incollare direttamente nel tuo foglio di stile.
In cosa differisce repeating-linear-gradient da un normale linear-gradient?
Un normale linear-gradient distende la sua sequenza di colori esattamente una volta sull'intero elemento, mentre repeating-linear-gradient ripete la stessa sequenza di color stop in modo ciclico, producendo uno sfondo a righe o con motivo.
Posso sovrapporre più gradienti come sfondo?
Sì, la proprietà background-image accetta un elenco di gradienti separati da virgola, che si sovrappongono a strati come farebbero più immagini di sfondo — il primo dell'elenco compare in cima.