Generatore Gradiente CSS Online
Crea gradienti CSS con anteprima in tempo reale. Nessuna installazione, gratuito.
background: linear-gradient(135deg, #667eea, #764ba2);
Perche usarlo
Gradienti CSS perfetti in pochi secondi
Anteprima in tempo reale
Vedi il risultato mentre regoli colori, angoli e posizioni.
Codice pronto per la produzione
Sintassi CSS moderna. Nessun prefisso vendor inutile.
Compatibile con i browser
Verifica la compatibilita e ottieni il codice corretto per i tuoi browser target.
Nessuna installazione
Tutto nel browser. Nessun bisogno di Figma, Sketch o plugin.
Come funziona
Tre passaggi, senza complicazioni
Scegli il tipo di gradiente
Seleziona tra linear-gradient, radial-gradient o conic-gradient. Ogni tipo ha i suoi controlli specifici.
Configura colori e posizioni
Aggiungi tutti i color stop che vuoi. Regola angolo, posizione centrale e percentuale di ogni colore con i controlli visivi.
Copia il codice CSS
Il codice CSS viene generato in tempo reale. Copia la proprieta background completa, pronta da incollare nel tuo foglio di stile.
FAQ
Hai delle domande?
Un gradiente lineare (linear-gradient) transisce tra i colori lungo una retta a un angolo definito. Un gradiente radiale (radial-gradient) si irradia da un punto centrale verso l'esterno in forma circolare o ellittica. Un gradiente conico (conic-gradient) transisce attorno a un punto centrale come le lancette di un orologio: ideale per grafici a torta o effetti di colori rotanti in puro CSS.
Usa rgba() come color stop. Ad esempio: linear-gradient(to right, rgba(255,0,0,1), rgba(255,0,0,0)) crea un gradiente da rosso pieno a rosso completamente trasparente. Evita di usare la parola chiave transparent su sfondi scuri perche i browser interpolano attraverso il nero (rgba(0,0,0,0)), creando un artefatto grigiastro indesiderato.
I gradienti lineari e radiali sono supportati da tutti i browser moderni dal 2012 (Chrome 26+, Firefox 16+, Safari 6.1+, Edge 12+). I gradienti conici sono piu recenti: supportati da Chrome 69 (2018), Firefox 83 (2020) e Safari 12.1 (2019). Per i progetti che richiedono il supporto di IE11, i gradienti CSS non hanno un fallback nativo: usa immagini SVG come alternativa.
Aggiungi piu color stop: linear-gradient(45deg, #ff0000 0%, #ff7700 25%, #ffff00 50%, #00ff00 75%, #0000ff 100%). Controlla la posizione esatta di ogni colore con percentuali o valori assoluti (px, em). Se non specifichi le posizioni, i colori vengono distribuiti uniformemente.
I gradienti CSS vengono generati dalla GPU del browser e non richiedono nessuna richiesta di rete, rendendoli significativamente piu efficienti delle immagini. Tuttavia, gradienti CSS molto complessi con molti color stop possono influire sul repaint della pagina. Per i gradienti animati, le prestazioni possono peggiorare su dispositivi mobili di fascia bassa: considera di usare transform o opacity, che sono proprieta accelerate da GPU e non causano reflow.
Gradienti CSS: storia della specifica W3C e tecniche avanzate
I gradienti CSS hanno una storia di standardizzazione complessa. Le prime implementazioni comparvero come estensioni proprietarie: -webkit-gradient() in Safari 4 (2008) con una sintassi completamente diversa da quella moderna. Mozilla implemento -moz-linear-gradient() in Firefox 3.6 (2010). La sintassi moderna, molto piu intuitiva, fu introdotta nel modulo CSS Images Level 3 del W3C, che raggiunse lo stato di Candidate Recommendation nel 2011 e il supporto senza prefissi in Chrome 26 e Firefox 16 nel 2012. La funzione conic-gradient() fu proposta da Lea Verou nel 2015 e standardizzata in CSS Images Level 4.
I gradienti CSS vengono renderizzati interamente sulla GPU attraverso il compositor layer del browser, a differenza delle immagini rasterizzate che richiedono una decodifica CPU preventiva. Questo li rende particolarmente efficienti per gli sfondi di grande area. Internamente, il rendering engine (Skia in Chrome/Edge, WebRender in Firefox) calcola l'interpolazione dei colori nello spazio cromatico sRGB per impostazione predefinita. CSS Color Level 4 introduce l'interpolazione in altri spazi cromatici (oklch, display-p3), abilitando gradienti percettivamente piu uniformi senza bande di colore indesiderate.
Una tecnica avanzata e il gradient halftone, che usa piu livelli di background per creare pattern a punti. Un'altra consiste nell'usare i gradienti come maschere CSS con mask-image: linear-gradient(), abilitando la dissolvenza degli elementi senza JavaScript. Per gli effetti di testo con gradiente, si combina background-clip: text con color: transparent, una tecnica popolarizzata nel design UI moderno dal 2015 e ampiamente usata nelle interfacce di Apple, Google e Meta. I gradienti sono anche la base del neumorfismo e del glassmorfismo, le tendenze di design dominanti dal 2019 al 2023.