🌈

Generatore gradiente CSS

Crea e visualizza in anteprima gradienti CSS lineari e radiali. Copia il codice CSS pronto all'uso.

Strumenti di design Funziona localmente Nessun dato inviato
Gradiente CSS lineare radiale design
Tipo di gradiente
Direzione
●
Stop di colore
Output CSS

Che cos'è il Generatore gradiente CSS?

Crea e visualizza in anteprima gradienti CSS lineari e radiali. Aggiungi stop di colore, scegli la direzione e copia subito codice CSS pronto all'uso.

Come usare Gradient Generator

  1. Scegli se desideri un gradiente lineare o radiale.
  2. Aggiungi o regola gli stop colore finché la sfumatura non è quella giusta.
  3. Regola i valori di angolo, posizione o diffusione nell'anteprima in tempo reale.
  4. Copia il CSS generato quando sei pronto a usarlo nel tuo progetto.

Strumenti correlati

🎨
Generatore palette colori
Genera palette di colori complementari, analoghe e triadiche
 🎨
Selettore colore
Converti i colori tra HEX, RGB, HSL e CMYK
 ⚖️
Verifica contrasto WCAG
Controlla i rapporti di contrasto colore WCAG AA e AAA per l'accessibilità
Comprendi i gradienti CSS ▾
Esempio
Input Lineare, 90°, fermate: #6366F1 → #8B5CF6
Risultato background: linear-gradient(90deg, #6366F1, #8B5CF6);
Casi d'uso comuni
  • Crea gradienti di sfondo hero per le pagine di marketing
  • Testa le modifiche ad angolo e fermate prima di modificare i file CSS
  • Genera sfondi curati per pulsanti o card
  • Condividi il CSS esatto del gradiente con gli sviluppatori senza conversione manuale
Domande frequenti
Devo usare prefissi vendor come -webkit-linear-gradient?

No — tutti i browser moderni (Chrome, Firefox, Safari, Edge) supportano i gradienti CSS senza prefisso. I prefissi vendor servono solo per browser molto obsoleti (IE 9 e precedenti).

Posso usare fermate di colore trasparenti?

Sì — usa colori rgba() o hsla() con un valore alfa pari a 0 per creare dissolvenze verso il trasparente. Ad esempio: rgba(99, 102, 241, 0) fa sfumare l'indaco fino a renderlo invisibile.

Posso usare questo gradiente sul testo?

Sì — copia il valore del gradiente e usalo con le proprietà CSS: background: linear-gradient(...); -webkit-background-clip: text; -webkit-text-fill-color: transparent;

Qual è il numero massimo di fermate di colore?

Questo strumento supporta fino a 6 fermate di colore. CSS stesso non ha un limite rigido — i browser supportano gradienti con decine di fermate, anche se le prestazioni possono variare.