Crea gradienti CSS lineari, radiali e conici da zero con controllo multi-stop trascinabile e preset curati. Copia il CSS pronto all'uso all'istante.

Anteprima live
Preset
Tipo di gradiente
Angolo
°
Stop colore
Trascina un cursore per spostare uno stop, o clicca sulla barra per aggiungerne uno. Seleziona uno stop per modificarne il colore.
Stop selezionato
%
CSS
background: ;

Tutto viene calcolato in tempo reale nel tuo browser — nessuna registrazione, completamente gratuito.


Informazioni su Generatore gradienti

Il Generatore di Gradienti crea gradienti CSS personalizzati da zero. Scegli un tipo lineare, radiale o conico, imposta l'angolo, e modella la sfumatura con un editor multi-stop: trascina le maniglie per spostare gli stop, clicca sulla barra per aggiungerne di nuovi, e ricolora ogni stop con un selettore: l'anteprima dal vivo si aggiorna man mano che lavori.

Preset curati offrono un buon punto di partenza quando non vuoi iniziare da zero, e azioni con un clic — casuale, inverti, ruota di 45° — rendono l'esplorazione rapida. Il CSS generato è sempre visibile e resta sincronizzato con l'anteprima, così quello che copi è esattamente ciò che hai visto.

Tutto viene calcolato dal vivo nel tuo browser senza alcun costo. Copia la regola CSS completa o solo il valore di sfondo e incollalo in un foglio di stile, in uno stile di pulsante o in una sezione hero: un generatore di gradienti CSS diretto per sfondi, overlay e accenti dell'interfaccia.

Come usare Generatore gradienti

  1. Scegli un tipo di gradiente: lineare, radiale o conico.
  2. Parti da un preset o clicca su "Casuale" per un punto di partenza immediato.
  3. Trascina le maniglie degli stop per posizionare i colori, clicca sulla barra per aggiungere stop, e modifica il colore di ciascuno.
  4. Regola l'angolo, oppure usa "Inverti" e "Ruota di 45°" per riorientare la sfumatura.
  5. Copia la regola CSS o il valore di sfondo e incollalo nel tuo progetto.

Domande frequenti

Sì. Lo strumento è interamente lato client: nessuna registrazione, nessun credito e nessun limite a quanti gradienti costruisci o copi.

Un gradiente lineare fonde i colori lungo una linea retta all'angolo scelto. Un gradiente radiale si irradia verso l'esterno da un punto centrale in cerchi. Un gradiente conico distribuisce i colori attorno a un punto centrale come una torta a settori, ottimo per ruote cromatiche e anelli di avanzamento.

Un gradiente richiede almeno due stop, e puoi continuare a cliccare sulla barra per aggiungerne altri. Ogni stop ha un proprio colore e una posizione trascinabile, così è facile costruire sfumature multicolore complesse.

I gradienti lineari e radiali sono supportati ovunque. Quelli conici sono supportati in tutti i browser moderni ma non in quelli molto datati, quindi prevedi un background-color di riserva se devi supportare versioni legacy.

Sì: usa lo strumento complementare Generatore di Gradiente da Immagine, che estrae i colori dominanti di un'immagine caricata e li trasforma in stop di gradiente modificabili. Questo strumento ne è la controparte da zero.


Ricerche popolari
generatore gradiente creatore gradiente css generatore linear gradient creatore radial gradient conic gradient css generatore gradiente gratis
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.