Toolzi LogoToolzi

Generatore di Gradienti CSS

Genera codice CSS per gradienti all'istante con un editor visuale.

0%
100%

Anteprima

Codice CSS

background: linear-gradient(to bottom right, #6366f1 0%, #ec4899 100%);

Cos'è un gradiente CSS?

I gradienti CSS sono transizioni di colore renderizzate direttamente dal browser senza immagini. Vengono usati per sfondi, bordi ed effetti UI.

Tipi di Gradienti CSS

Gradiente Lineare

I colori si fondono lungo una linea retta in un angolo o direzione specificata. Definito con linear-gradient().

Gradiente Radiale

I colori irradiano da un punto centrale in forma circolare o ellittica. Definito con radial-gradient().

Gradiente Conico

I colori ruotano attorno a un punto centrale, come un grafico a torta. Definito con conic-gradient().

Come Usare il Generatore

Seleziona un tipo di gradiente, regola la direzione o l'angolo, aggiungi o rimuovi stop di colore e copia il codice CSS generato.

Consigli per i Gradienti CSS

Usa rgba() o hex con alfa per gradienti trasparenti. Sovrapponi più gradienti con sfondi separati da virgole.

Domande Frequenti

Cos'è un gradiente CSS?
I gradienti CSS sono transizioni di colore create con funzioni come linear-gradient(), radial-gradient() o conic-gradient() senza file immagine.
Qual è la differenza tra gradiente lineare e radiale?
I gradienti lineari si fondono lungo una linea retta; quelli radiali si espandono da un punto centrale in forma circolare o ellittica.
Come aggiungere trasparenza a un gradiente CSS?
Usa valori rgba() (es. rgba(255,0,0,0.5)) o codici hex a 8 cifre (es. #ff000080) negli stop di colore.
conic-gradient è supportato da tutti i browser?
Sì, da tutti i browser moderni: Chrome 69+, Firefox 83+, Safari 12.1+.
Posso sovrapporre più gradienti su un elemento?
Sì. CSS supporta più sfondi separati da virgole, permettendo di sovrapporre gradienti su un unico elemento.
Come creare testo con gradiente in CSS?
Applica il gradiente come sfondo, poi usa -webkit-background-clip: text e color: transparent.
Cos'è uno stop di colore in un gradiente CSS?
Uno stop di colore definisce un colore specifico in una posizione percentuale specifica lungo il gradiente.

Strumenti Correlati

CSS Gradient Text Generator →