Generatore Gradienti CSS
Tipo di gradiente
Color Stop
CSS generato
background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);Preset
Domande Frequenti
Tutto quello che devi sapere sui gradienti CSS
Cosa sono i gradienti CSS?
I gradienti CSS sono transizioni fluide tra due o più colori, create senza immagini. Si distinguono in lineari (da un punto all'altro), radiali (dal centro verso l'esterno) e conici (rotazione attorno a un punto centrale). Sono supportati da tutti i browser moderni.
Come funzionano i color stop?
I color stop definiscono il colore e la posizione (0-100%) in cui quel colore appare nel gradiente. Tra due stop il browser crea automaticamente la transizione. Puoi aggiungere fino a 4 stop per creare gradienti complessi.
Posso usare gradients su testi e bordi?
Sì! Per i testi usa: `background: gradient; -webkit-background-clip: text; color: transparent;`. Per i bordi usa la proprietà `border-image`. Il generatore crea il CSS per il background, ma le stesse regole di colore si applicano ovunque.
What is the difference between a linear, radial and conic gradient?
The linear one runs from one point to another along an angle, the radial opens from the centre towards the edge, and the conic rotates around the centre. All current browsers support them.
What are color stops for?
Each color stop gives a color and its position from zero to one hundred along the gradient, and between two stops the browser works out the blend. Up to four stops can be used.
Can a gradient be used on text?
Yes. It is applied as a background and then clipped to the text with background-clip set to text and the color made transparent. For borders you use the border-image property instead.