Generatore gradiente CSS

Informazioni sui gradienti CSS

I gradienti CSS permettono di visualizzare transizioni fluide tra due o più colori, senza usare immagini. Sono generati dal browser, il che significa che si adattano perfettamente a qualsiasi risoluzione e non aggiungono peso al caricamento della pagina. I gradienti sono definiti tramite la proprietà background con le funzioni linear-gradient() o radial-gradient().

Una breve storia dei gradienti CSS

I gradienti CSS sono definiti nel CSS Image Values and Replaced Content Module Level 3, mantenuto dal CSS Working Group del W3C e curato da Tab Atkins Jr. e Elika J. Etemad tra gli altri. La First Public Working Draft è stata il 12 luglio 2011; la specifica ha raggiunto la Candidate Recommendation il 17 aprile 2012, bloccando la moderna sintassi senza prefissi, inclusa la convenzione che 0deg punta verso l'alto (verso la cima) e to right equivale a 90deg. Ordine di distribuzione del browser: WebKit è stato il primo con ampio margine, con -webkit-gradient() utilizzabile in Safari 4 (2009) usando una sintassi pesante con chiamate di funzione. Firefox ha distribuito -moz-linear-gradient() in Firefox 3.6 il 21 gennaio 2010; Internet Explorer 10 ha distribuito le forme senza prefisso nel 2012; la sintassi senza prefisso si è stabilizzata su tutti i principali motori entro la fine del 2013. conic-gradient() è stato specificato in seguito in CSS Images Level 4, Lea Verou ha redatto la proposta nel 2011, Tab Atkins l'ha aggiunta alla specifica nel 2012, e la distribuzione nativa è arrivata in Chrome 69 (4 settembre 2018), Safari 12.1 (25 marzo 2019) e Firefox 83 (17 novembre 2020). Nel 2026 puoi scrivere background: linear-gradient(...) e background: radial-gradient(...) con fiducia senza prefissi e senza fallback per qualsiasi browser che valga la pena supportare.

linear-gradient: angoli, lati, e la sottigliezza diagonale

La grammatica formale è linear-gradient([<angle> | to <side-or-corner>], <color-stop>, ...). La convenzione angolare inciampa frequentemente gli sviluppatori perché differisce dalla convenzione SVG/canvas. 0deg equivale a to top, la linea del gradiente punta verso l'alto, quindi l'ultimo colore appare in cima. 90deg equivale a to right. 180deg equivale a to bottom (il default se non viene data direzione). 270deg equivale a to left. 135deg è la diagonale canonica, dall'alto-sinistra al basso-destra, la direzione di gradiente più comune nel design web moderno. Angoli crescenti ruotano in senso orario dall'alto, opposto alla convenzione matematica (dove 0 è a destra e gli angoli aumentano in senso antiorario) e opposto a <linearGradient> di SVG. Una sottigliezza utile: to right e 90deg sono equivalenti solo su box quadrate. Su un box non quadrato, to top right produce una linea di gradiente esattamente perpendicolare alla diagonale dall'angolo basso-sinistra, il che significa che il gradiente colpisce l'angolo pulitamente, mentre 45deg è sempre letteralmente 45 gradi indipendentemente dal rapporto d'aspetto. Per la maggior parte degli sfondi hero questa distinzione non importa; per design allineati con precisione può importare.

radial-gradient: forme, dimensioni e posizione

La grammatica è radial-gradient([<shape> || <size>] [at <position>]?, <color-stop>, ...). Due valori di forma: circle (cerchio perfetto scalato al box) e ellipse (default, allungato al rapporto d'aspetto del box). La dimensione può essere una delle quattro parole chiave di estensione o lunghezze/percentuali esplicite. closest-side: la forma finale tocca il lato più vicino. closest-corner: la forma finale passa esattamente attraverso l'angolo più vicino. farthest-side: la forma finale tocca il lato più lontano. farthest-corner (il default): la forma finale passa attraverso l'angolo più lontano. La clausola at <position> sposta il centro, at top left, at 30% 70%, ecc. Il centro di default è at center center. I gradienti radiali sono come si fanno effetti spotlight, glow morbidi, sfondi "vignette" dove i bordi si scuriscono verso il nero, e sfondi circolari per badge. Sono notevolmente meno comuni dei gradienti lineari nell'uso di produzione del 2026, la maggior parte degli sfondi "gradient" che vedi sulle landing page sono lineari, ma sono indispensabili per i casi in cui il lineare non può arrivare.

Color stop, il cuore di un gradiente

Un color stop è un valore di colore con una posizione opzionale lungo la linea del gradiente. linear-gradient(red, blue) piazza rosso al 0% e blu al 100%, con un'interpolazione liscia tra. linear-gradient(red 0%, yellow 50%, blue 100%) aggiunge uno stop giallo nel mezzo. Gli stop con posizioni esplicite possono essere piazzati ovunque dallo 0% al 100%, e gli stop senza posizioni esplicite sono distribuiti uniformemente tra i loro vicini con posizione esplicita. Hard color stops, due stop nella stessa posizione, come linear-gradient(red 50%, blue 50%), producono una transizione istantanea piuttosto che una fusione liscia. Questo è il trucco dietro ogni pattern CSS: strisce, scacchiere, punti, tutti costruiti da stack di gradienti con hard stop. Hint di interpolazione del colore (CSS Images Level 4): inserire una percentuale nuda tra due stop sbilancia dove cade il punto medio dell'interpolazione. linear-gradient(red, 25%, blue) sposta il punto medio percettivo al 25% piuttosto che al default 50%, utile per pesare sottilmente un colore rispetto all'altro. Interpolazione moderna nello spazio colore (CSS Color Module 4, baseline 2023+): linear-gradient(in oklch, red, blue) interpola nello spazio colore percettivamente uniforme Oklab piuttosto che sRGB gamma-encoded, producendo transizioni più lisce attraverso il mezzo senza la "dead zone" grigia fangosa che l'interpolazione sRGB produce tra colori complementari ad alto croma. Il default è ancora in oklab (o in srgb nei browser più vecchi), per gradienti costruiti a mano puoi optare.

Spazi colore moderni, perché i gradienti oklch sembrano migliori

Per due decenni, ogni gradiente CSS ha interpolato valori di colore in sRGB, lo spazio colore gamma-encoded con cui il web è cresciuto. L'interpolazione sRGB ha una modalità di fallimento ben nota: gradienti tra colori complementari ad alto croma (rosso ↔ verde, blu ↔ giallo, magenta ↔ ciano) passano attraverso un punto medio grigio fangoso. Prova linear-gradient(red, green) in sRGB e il mezzo è marrone, non l'oliva brillante che i tuoi occhi si aspettano. Oklab (Björn Ottosson, dicembre 2020) è uno spazio colore percettivamente uniforme progettato specificamente per risolvere questo. OKLCH è la forma cilindrica di Oklab, le tre coordinate sono Luminosità (0-100%), Croma (0+), e Tonalità (0-360°). I gradienti in OKLCH rimangono percettivamente lisci attraverso l'intera transizione, con la luminosità che rampa uniformemente e la tonalità che ruota prevedibilmente attraverso la ruota dei colori. La specifica CSS Color Module 4 ha aggiunto <color-interpolation-method> come parametro alle funzioni gradiente: linear-gradient(in oklch, red, blue). Il supporto del browser ha raggiunto la baseline tra metà e fine 2023 (Safari 16.4 marzo 2023, Chrome 111 marzo 2023, Firefox 113 maggio 2023). Per i gradienti usati nei design system di produzione, l'opzione OKLCH è sempre più la scelta giusta; questo generatore attualmente emette gradienti con default sRGB e il toggle OKLCH è nella roadmap.

Performance, i gradienti sono economici, ma non gratuiti

I gradienti CSS sono accelerati dalla GPU su ogni browser moderno, il che li rende drammaticamente più veloci delle immagini bitmap tile per la maggior parte dei casi d'uso, nessuna richiesta HTTP, nessuna decodifica, indipendenti dalla risoluzione vettoriale, istantaneamente ricolorabili attraverso le variabili CSS. I compromessi da conoscere: il costo di paint scala con i pixel toccati e la complessità del gradiente; i gradienti sono tra le cose più costose che un browser può dipingere, e impilare molti layer di gradienti attraverso un hero a viewport intero può costare frame su GPU di fascia bassa. Animare i colori del gradiente innesca un repaint completo ogni frame, molto più costoso che animare transform o opacity. La soluzione moderna è usare proprietà personalizzate registrate con @property (Houdini Properties and Values API), che permette al browser di interpolare i valori del colore sul thread del compositor invece che sul thread principale; supportato in Chrome 78+ (nov 2019), Safari 16.4+ (mar 2023), Firefox 128+ (lug 2024). L'alternativa tradizionale più economica è animare background-position su un gradiente fisso, una vera animazione solo-compositor che gira a 60fps ovunque. L'euristica generale di performance: se la tua pagina ha un singolo gradiente statico, non lo noterai mai; se stai impilando cinque layer di gradienti animati su ogni card in una lunga lista, profilalo prima di spedire.

Dove i gradienti guadagnano il loro posto

• Sfondi della sezione hero. Gradienti morbidi nei colori del brand dietro il titolo della pagina, spesso con sottili overlay radiali per profondità atmosferica. Stripe, Linear e la maggior parte delle landing page SaaS moderne si appoggiano a questo.
• Styling dei pulsanti. Gradienti sottili sui pulsanti CTA primari aggiungono profondità tattile che i colori solidi piatti non hanno. Aggiungi un gradiente di stato hover leggermente più scuro e il pulsante sembra vivo.
• Overlay di immagini per la leggibilità del testo. Un linear-gradient verticale che sfuma da trasparente in alto a scuro in basso, sovrapposto a un'immagine hero con testo bianco nella zona scura, rende il testo leggibile indipendentemente da come appare la foto.
• Sfondi delle card. Gradienti sottili sugli sfondi delle card aggiungono profondità senza un box-shadow pesante.
• Skeleton di caricamento e indicatori di progresso. Lo skeleton shimmer classico è un gradiente lineare con bianco semi-trasparente che si muove attraverso uno sfondo grigio, animato tramite background-position.
• Glassmorphism e styling UI moderno. L'effetto vetro smerigliato reso popolare da macOS Big Sur e iOS, uno sfondo semi-trasparente con backdrop-filter blur, spesso stratificato con un gradiente sottile per l'effetto highlight.
• Imitazioni di gradienti mesh. I veri gradienti mesh CSS non sono ancora standard (CSS Images Level 5 alla fine li aggiungerà), ma impilare 3-5 grandi gradienti radiali con colori semi-trasparenti produce un effetto gradiente mesh convincente oggi.

Ambito onesto: cosa fa e cosa non fa questo generatore

Questo strumento genera gradienti CSS lineari e radiali con un'anteprima dal vivo, angolo configurabile (per lineare) o posizione (per radiale), e un numero qualsiasi di color stop con posizioni. Emette la sintassi moderna senza prefisso. Cosa questo strumento non fa attualmente, che generatori più elaborati gestiscono: gradienti conici (la varietà che ruota attorno a un centro, usata per grafici a torta, sunburst e ruote di colori), vedi il CSS Pattern Generator di Absolutool per alcuni esempi di pattern conici; gradienti ripetuti (repeating-linear-gradient, repeating-radial-gradient, repeating-conic-gradient) per riempimenti tipo strisce e pattern, anch'essi gestiti nel CSS Pattern Generator; toggle di interpolazione OKLCH / Oklab (lo spazio colore moderno percettivamente uniforme), attualmente emette con default sRGB; sintassi color hint per sbilanciare il punto medio tra gli stop; keyframe di animazione multi-stop. Per la maggior parte dei gradienti di produzione (sfondi hero, stili pulsanti, effetti overlay), lineare + radiale copre il caso d'uso; per i casi più esotici il CSS Pattern Generator è lo strumento complementare giusto.

Domande frequenti

I gradienti CSS sono supportati da tutti i browser?

Sì. I gradienti CSS sono supportati da tutti i principali browser dal 2013, con oltre il 98 % di copertura mondiale. Non hai più bisogno di prefissi vendor come -webkit- per un uso moderno.

Quale angolo usare per un gradiente diagonale?

135 gradi crea una diagonale alto-sinistra verso basso-destra, la più comune. 45 gradi parte da basso-sinistra verso alto-destra. 90 gradi va da sinistra a destra, e 180 gradi dall'alto al basso.

Posso usare più di due colori?

Assolutamente. Clicca su «Aggiungi un punto» per aggiungere fino a 8 punti di colore. Puoi controllare ogni colore e la sua posizione lungo il gradiente. I gradienti multi-punto creano effetti visivi più ricchi e dinamici.

Perché non c'è un'opzione per gradiente conico?

I gradienti conici (la varietà che ruota attorno a un centro, usata per grafici a torta, sunburst e ruote di colori) sono un problema di design diverso dai gradienti lineari e radiali, i parametri sono angoli attorno a un centro piuttosto che posizioni lungo una linea. Per esempi e pattern di conic-gradient, usa il CSS Pattern Generator di Absolutool, che gestisce i casi più esotici (conici, repeating-linear, repeating-conic) per riempimenti tipo pattern. Questo generatore si concentra sui casi lineare+radiale che coprono la maggior parte dei gradienti hero-e-pulsante di produzione.

I gradienti CSS sono più veloci degli sfondi immagine?

Per la maggior parte dei casi, sì, un gradiente CSS elimina una richiesta HTTP, un passaggio di decodifica, e la spedizione di asset multi-risoluzione richiesta per display retina. Il gradiente è anche perfetto vettorialmente a qualsiasi zoom e banalmente ricolorabile attraverso variabili CSS. Compromessi: i gradienti sono dipinti dalla GPU ma il costo di paint scala con l'area in pixel e la complessità degli stop; impilare molti layer di gradienti attraverso un hero a viewport intero può costare frame su GPU di fascia bassa. Per l'animazione, anima background-position (solo-compositor, economico) piuttosto che color stop del gradiente (repaint completo, costoso). Singoli gradienti statici su card o sezioni hero, mai notabili.

I miei dati vengono inviati da qualche parte?

No. La generazione gira interamente nel tuo browser, color picker, slider angolare e generazione del codice CSS girano tutti localmente. Non ci sono richieste in uscita quando usi i controlli. Il CSS generato è tuo da incollare ovunque.

Strumenti correlati