Crea gradienti CSS lineari, radiali e conici con più punti di colore e copia il codice.

Anteprima
Output CSS
background: ;

Tutto viene eseguito nel tuo browser — nessun caricamento, nessuna registrazione.

Tipo di gradiente
deg
Punti di colore Clicca sulla barra per aggiungere un punto, trascina per spostarlo
Punto selezionato
Colore del punto
100%
%
Preset

Informazioni su Generatore di Gradienti CSS

Il Generatore di Gradienti CSS crea gradienti lineari, radiali e conici con pieno controllo visivo. Aggiungi punti di colore cliccando sulla barra del gradiente, trascinali per riposizionarli, e assegna a ogni punto un proprio colore, opacità e posizione. I gradienti lineari ottengono un controllo dell'angolo; quelli radiali una forma (cerchio o ellisse) e una posizione; quelli conici un angolo di partenza.

L'anteprima live mostra esattamente ciò che il browser renderizzerà, e un pulsante casuale più una serie di preset curati sono disponibili quando serve un punto di partenza invece di una tela vuota. I punti possono essere aggiunti e rimossi liberamente — un gradiente richiede solo almeno due punti.

Quando il risultato è quello giusto, copia il valore nudo del gradiente o una regola CSS completa. Il generatore funziona interamente nel tuo browser senza upload e senza registrazione, rendendolo un compagno rapido per pulsanti, sfondi hero, bordi ed effetti testuali.

Come usare Generatore di Gradienti CSS

  1. Scegli il tipo di gradiente: lineare, radiale o conico.
  2. Imposta l'angolo (lineare), la forma e la posizione (radiale), oppure l'angolo di partenza (conico).
  3. Clicca sulla barra del gradiente per aggiungere punti di colore e trascinali in posizione.
  4. Assegna a ogni punto il suo colore, opacità e posizione esatta.
  5. Prova i preset o il pulsante casuale per un'ispirazione rapida.
  6. Copia il valore del gradiente o la regola CSS completa.

Domande frequenti

I gradienti lineari mescolano i colori lungo una linea retta con un angolo. I gradienti radiali si irradiano verso l'esterno da un punto centrale come cerchio o ellisse. I gradienti conici distribuiscono i colori attorno a un punto centrale — il tipo alla base di grafici a torta e ruote cromatiche.

Almeno due, senza un limite superiore pratico. Due o tre punti creano sfondi puliti; punti ravvicinati creano fasce di colore nette, che è come si realizzano effetti a righe e segmentati.

Sì — ogni punto ha il proprio controllo di opacità. Un punto allo 0% di opacità fa dissolvere il gradiente, che è il modo standard per fondere una sovrapposizione colorata in una foto o dissolvere una sezione hero nello sfondo della pagina.

Non direttamente — i browser non possono eseguire una transizione tra valori di gradiente. I trucchi consueti: animare background-position su un gradiente sovradimensionato, ruotare un gradiente conico con una proprietà personalizzata, o dissolvere in incrocio due elementi sovrapposti.

Sì, gratuito e illimitato. Funziona completamente nel tuo browser, quindi nulla di ciò che progetti viene memorizzato o trasmesso.


Ricerche popolari
generatore gradienti css generatore gradiente lineare css gradiente radiale css gradiente conico css creatore gradiente di sfondo css strumento punti di colore gradiente selettore angolo gradiente css generatore gradienti online
Hai bisogno di aiuto?
Hai riscontrato un problema con questo strumento? Faccelo sapere.
Segnala un problema

Aggiungi questo strumento gratuito al tuo sito web — copia e incolla il codice qui sotto.