Binatomy
CSS

Generatore Gradienti CSS

Crea gradienti CSS lineari, radiali e conici con anteprima live

Tipo di gradiente

Color Stop

0%
100%

CSS generato

background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);

Preset

FAQ

Domande Frequenti

Tutto quello che devi sapere sui gradienti CSS

Domande frequenti

Che differenza c'è fra gradiente lineare, radiale e conico?

Il lineare va da un punto all'altro seguendo un angolo, il radiale si apre dal centro verso il bordo e il conico ruota attorno al centro. Sono supportati da tutti i browser aggiornati.

A cosa servono i color stop?

Ogni color stop indica un colore e la sua posizione da zero a cento nel gradiente, e fra due stop la sfumatura la calcola il browser. Si possono usare fino a quattro stop.

Il gradiente si può usare anche sul testo?

Sì, si applica come sfondo e poi si ritaglia sul testo con background-clip impostato su text e il colore trasparente. Per i bordi si usa invece la proprietà border-image.