Strumenti per sviluppatori

Generatore di gradienti CSS — crea gradienti nel tuo browser

Progetta un gradiente visivamente e copia il CSS con un clic.

Questo strumento funziona interamente nel tuo browser. I tuoi file non vengono mai caricati — restano sul tuo dispositivo.

Formato
90°
Color stops
  • 0%
  • 100%
Risultato
background: linear-gradient(90deg, #6d28d9 0%, #ec4899 100%);

Scrivere a mano la sintassi dei gradienti è laborioso: una percentuale sbagliata o un'unità dimenticata e l'intero sfondo non funziona. Questo generatore ti permette di costruire il gradiente visivamente: aggiungi quanti color stop vuoi, trascina le loro posizioni, alterna tra lineare e radiale e guarda l'anteprima aggiornarsi all'istante.

Tutto avviene nel tuo browser. Non c'è registrazione, nessuna comunicazione con il server e nulla da installare: il CSS viene generato sul tuo dispositivo nel momento in cui modifichi un'impostazione, pronto da copiare direttamente nel tuo foglio di stile.

Come usare Generatore di gradienti CSS

  1. Scegli un tipo di gradiente: lineare o radiale.
  2. Per un gradiente lineare, imposta l'angolo in gradi.
  3. Regola ogni color stop con il selettore di colore e il suo cursore di posizione.
  4. Aggiungi o rimuovi gli stop finché l'anteprima non è quella giusta.
  5. Fai clic su "Copia CSS" per copiare la regola di background generata.

Domande frequenti

Quale CSS genera?

Produce un'unica proprietà background che usa la funzione standard linear-gradient() o radial-gradient(), così puoi incollarla direttamente in qualsiasi foglio di stile o stile inline.

Quanti color stop posso aggiungere?

Quanti ne servono. Ogni stop ha il proprio colore e la propria posizione, e il gradiente si aggiorna dal vivo man mano che li aggiungi, modifichi o rimuovi.

L'angolo si applica ai gradienti radiali?

No. L'angolo influisce solo sui gradienti lineari. I gradienti radiali si diffondono verso l'esterno dal centro, quindi il controllo dell'angolo è nascosto quando è selezionato il radiale.

Viene inviato qualcosa a un server?

No. Lo strumento funziona interamente nel browser. I tuoi colori e il CSS generato non lasciano mai il dispositivo.

Strumenti correlati