Generatore di Gradienti CSS — Gradienti Lineari e Radiali

Generatore di Gradienti CSS — Progetta Gradienti Visivamente

Crea splendidi gradienti CSS con un editor visivo dal vivo. Aggiungi quanti punti di colore vuoi, scegli gradienti lineari, radiali o conici, regola l’angolo e copia il codice CSS pronto all’uso. Perfetto per sfondi, pulsanti, schede e sezioni hero.

Tipi di gradiente

• Lineare: i colori si fondono lungo una linea retta a qualsiasi angolo (0–360°)
• Radiale: i colori si irradiano dal centro, come cerchio o ellisse
• Conico: i colori ruotano attorno a un punto centrale (ideale per ruote di colori ed effetti a torta)

Funzionalità

• Punti di colore illimitati: aggiungi o rimuovi colori liberamente
• Controllo posizione: fai scorrere ogni colore da 0% a 100%
• Controllo angolo: ruota i gradienti lineari e conici con precisione
• Anteprima dal vivo: guarda il tuo gradiente aggiornarsi all’istante
• Pulsante casuale: genera una nuova combinazione di colori per ispirarti
• Output CSS pulito: copia una singola riga pronta da incollare

Come usare il CSS

Copia il codice generato e applicalo a qualsiasi elemento. Per esempio:

.hero {
  background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
}

Consigli

• Due o tre colori spesso appaiono più puliti di molti
• Per sfondi delicati, usa colori vicini sulla ruota dei colori
• Per effetti vivaci, usa colori complementari
• I gradienti conici sono perfetti per spinner di caricamento e selettori di colore

Privacy

Questo strumento funziona interamente nel tuo browser. Niente viene caricato o memorizzato.

Passo dopo passo

1. Scegli il tipo: lineare, radiale o conico.
2. Per un gradiente lineare regola l’angolo; per uno radiale la forma (cerchio o ellisse).
3. Aggiungi punti di colore e spostali. Il pulsante Casuale propone idee nuove.
4. Copia il codice con Copia CSS.

Domande frequenti

Come uso il codice?
Incollalo come background o background-image in una regola CSS, ad esempio per lo sfondo di una sezione o di un pulsante.

Cos’è un gradiente conico?
I colori ruotano attorno a un punto centrale, come in un grafico a torta o in una ruota dei colori.

Quanti punti di colore posso usare?
Quanti vuoi. Più punti danno più controllo, ma rendono il risultato più difficile da leggere e mantenere.