🌈

Generatore gradiente CSS

Crea visivamente gradienti CSS lineari e radiali. Aggiungi stop di colore, regola le posizioni, imposta l'angolo e copia il codice CSS pronto all'uso con un clic.

Strumenti di generazione Funziona localmente Nessun dato inviato
Gradiente CSSgradiente linearegradiente radialestop di colore
Tipo di gradiente
Angolo
Stop di colore
Anteprima
Output CSS
background: linear-gradient(135deg, #7c6af7 0%, #06b6d4 100%);

Che cos'è il Generatore gradiente CSS?

Il Generatore gradiente CSS è uno strumento visivo per creare gradienti CSS lineari e radiali. Aggiungi stop di colore, imposta le loro posizioni su una scala 0—00%, scegli un angolo per i gradienti lineari e visualizza il risultato in tempo reale. La proprietà CSS finale è pronta da incollare in qualsiasi foglio di stile.

Come usare il Generatore gradiente CSS

  1. Scegli il tipo di gradiente Lineare o Radiale.
  2. Per i gradienti lineari, imposta l'angolo usando il cursore.
  3. Modifica gli stop di colore predefiniti facendo clic sui selettori di colore e regolando le posizioni.
  4. Aggiungi altri stop di colore con il pulsante "Aggiungi stop di colore" se necessario.
  5. Fai clic su "Copia CSS" per copiare la proprietà del gradiente negli appunti.

Strumenti correlati

🎨
Estrai palette immagine
Estrai una palette compatta di colori HEX dominanti da un'immagine
 ☀️
Luminosità contrasto immagine
Regola luminosità e contrasto della foto con anteprima istantanea
 🌓
Immagine duotone
Mappa ombre e luci dell'immagine su due colori personalizzati
Sintassi gradiente CSS ▾
Esempio
Input Lineare, 135°, stop 1: #7c6af7 a 0%, stop 2: #06b6d4 a 100%
Risultato background: linear-gradient(135deg, #7c6af7 0%, #06b6d4 100%);
Casi d'uso comuni
  • Genera gradienti di sfondo per landing page e componenti UI
  • Crea overlay sfumati per sezioni hero
  • Crea pattern con stop di colore per grafici o divisori
  • Prototipa idee di gradiente prima di trasferirle a uno strumento di design
Domande frequenti
Quali tipi di gradiente sono supportati?

Sono supportati sia gradienti lineari con angolo personalizzato (0—60°) sia gradienti radiali (forma circolare).

Posso aggiungere più di due stop di colore?

Sì. Fai clic su "Aggiungi stop di colore" per aggiungere tutti gli stop che desideri. Ogni stop ha colore e posizione indipendenti.

Come posso controllare la direzione di un gradiente lineare?

Usa il cursore Angolo. 0° va dall'alto verso il basso, 90° da sinistra a destra e 135° in diagonale.

L'output è compatibile con i diversi browser?

Yes. The tool outputs standard CSS using the linear-gradient() and radial-gradient() functions which are supported by all modern browsers.