Generatore di gradienti CSS
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
Perché usare un generatore visuale di gradienti?
Scrivere i gradienti CSS a mano è tedioso — memorizzare la sintassi di linear-gradient(), radial-gradient() e conic-gradient() con più stop di colore e posizioni è soggetto a errori. Il nostro generatore visuale ti permette di gestire gli stop di colore con selettori e cursori di posizione, con un'anteprima live che si aggiorna istantaneamente, rendendo la creazione di gradienti rapida e intuitiva.
3 tipi di gradiente
Gradienti lineari, radiali e conici tutti supportati con controlli specifici per ogni tipo
Gradienti multicolore
Aggiungi stop di colore illimitati e trascina le loro posizioni per creare gradienti multicolore complessi
Anteprima live
Vedi il tuo gradiente renderizzato in tempo reale mentre regoli colori, posizioni e angolo
Come creare un gradiente CSS
Scegli il tipo di gradiente
Seleziona un gradiente lineare, radiale o conico e imposta l'angolo o la direzione
Configura gli stop di colore
Usa i selettori per definire il colore di ogni stop e i cursori per posizionarli
Copia il CSS
Fai clic su 'Copia CSS' per la proprietà background completa pronta per il tuo foglio di stile
Casi d'uso dei gradienti CSS
Sfondi hero
Crea sfondi a pagina intera straordinari con gradienti diagonali o radiali
Testo con gradiente
Applica gradienti al testo con background-clip: text per effetti tipografici sorprendenti
Bordi con gradiente
Usa i gradienti con border-image per creare bordi colorati sugli elementi
Sovrapposizioni di immagini
Sovrapponi gradienti alle immagini per creare schermi scuri che consentano la leggibilità del testo
Best practice per i gradienti CSS
✓ Usa 135deg per i gradienti diagonali
Un angolo di 135 gradi crea una classica diagonale dall'alto-sinistra al basso-destra che sembra naturale e dinamica — una scelta popolare per le sezioni hero.
✓ Mantieni i gradienti sottili per l'UI
Per gli elementi UI (pulsanti, schede), usa gradienti molto sottili dello stesso tono con una differenza di luminosità del 10-20% per aggiungere profondità senza rumore visivo.
✓ Fornisci un colore di fallback
Aggiungi un background-color solido prima del tuo gradiente come fallback: background-color: #6366f1; background: linear-gradient(...).
✓ Anima la posizione del gradiente
I gradienti CSS non possono essere animati direttamente, ma puoi animare background-position su un gradiente più grande per creare un effetto fluido.
❓ Domande frequenti
Qual è la differenza tra gradienti lineari, radiali e conici?
I gradienti lineari effettuano la transizione lungo una linea retta a un angolo. I gradienti radiali irradiano da un punto centrale in cerchi o ellissi. I gradienti conici ruotano attorno a un punto centrale come un grafico a torta — ideali per gli anelli di avanzamento e le ruote dei colori.
Come creare un gradiente trasparente?
Usa transparent come stop di colore: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent). Questo crea un gradiente da un colore semiopaco a completamente trasparente — perfetto per le sovrapposizioni delle immagini.
Perché il mio gradiente ha delle bande o striature?
Il banding (strisce visibili tra i colori) appare su schermi di bassa qualità o nelle transizioni tra toni simili. Aggiungi uno stop di colore intermedio in un tono complementare per ammorbidire la transizione.
Posso usare i gradienti come bordi?
Sì, usa border-image: linear-gradient(...) 1. Questo imposta il gradiente come immagine del bordo. In alternativa, usa uno pseudoelemento ::before con sfondo a gradiente e z-index negativo per simulare bordi con gradiente.