Convertitore gratuito

Gradiente CSS Generatore

Genera visivamente gradienti CSS con anteprima dal vivo. Crea sfumature lineari, radiali e coniche con interruzioni di colore personalizzate, gratuite e lato client.

Anteprima dal vivo
Uscita CSS
.element {
  background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
}
Gradient Type
Angolo (90deg)
90°180°270°360°
Color Stops
#6366f10%
#ec4899100%

Informazioni su questo strumento

Crea bellissimi gradienti lineari e radiali CSS con un editor visivo. Scegli i colori, regola le fermate, cambia la direzione o l'angolazione e guarda l'aggiornamento dell'anteprima dal vivo in tempo reale. Copia il codice CSS generato, inclusi i prefissi dei fornitori per i browser meno recenti, e incollalo direttamente nel tuo foglio di stile.

Come usarlo

  1. Scegli il tipo di gradiente: lineare o radiale.
  2. Aggiungi interruzioni di colore facendo clic sulla barra della sfumatura e selezionando i colori.
  3. Regolare l'angolo del gradiente (lineare) o la posizione (radiale) utilizzando i controlli.
  4. Copia il codice CSS generato dal pannello di output.

Domande frequenti

I gradienti CSS funzionano in tutti i browser?
I moderni gradienti CSS (gradiente lineare, gradiente radiale) sono supportati in tutti i browser attuali, inclusi Chrome, Firefox, Safari ed Edge. Lo strumento può facoltativamente generare prefissi -webkit- per versioni precedenti del browser.
Posso creare sfumature multicolori?
SÌ. Aggiungi tutte le interruzioni di colore di cui hai bisogno. Puoi anche regolare la posizione di ciascun punto di arresto per controllare dove si fondono i colori. Ciò consente sfumature complesse di arcobaleno, tramonto o marchio personalizzato.
Qual è la differenza tra gradienti lineari e radiali?
I gradienti lineari fanno passare i colori lungo una linea retta (dall'alto verso il basso, da sinistra a destra, in diagonale o con qualsiasi angolo). Le sfumature radiali fanno passare i colori verso l'esterno da un punto centrale in una forma circolare o ellittica.
Posso utilizzare il gradiente come sfondo per il testo?
SÌ. Usa background-clip: text con -webkit-text-fill-color: trasparente per applicare il gradiente al testo. Il CSS generato fornisce la definizione del gradiente: combinala con queste proprietà per il testo del gradiente.