Generatore di gradienti CSS
NovitàCrea gradienti CSS lineari, radiali e conici con anteprima in tempo reale.
Click the bar to add a stop · drag a handle to move it.
Runs entirely in your browser. Nothing is uploaded.
Un generatore visivo di gradienti CSS che gira nel tuo browser
Questo generatore di gradienti CSS trasforma la complicata sintassi di linear-gradient(), radial-gradient() e conic-gradient() in pochi clic. Aggiungi e trascina i color stop sulla barra del gradiente, imposta l'angolo o il centro, e osserva l'anteprima a schermo intero aggiornarsi in tempo reale. Quando il risultato è quello giusto, copia il codice pronto per la produzione. Non c'è nulla da installare né un account da creare, e ogni gradiente viene renderizzato in locale, quindi nulla di ciò che crei viene mai caricato online.
È pensato per essere l'unico strumento di gradienti di cui hai bisogno: più completo di generatori mono-funzione come cssgradient.io (senza supporto conico, senza output Tailwind) o dell'estensione Colorzilla per browser (senza esportazione PNG). A differenza dello strumento gradienti di sfondo di Canva, che blocca le funzioni dietro un account, o degli strumenti gradiente di Adobe che richiedono un abbonamento Creative Cloud, qui tutto è gratuito.
Lineare, radiale e conico — ogni tipo di gradiente
Passa da un generatore di gradienti lineari (sfumatura lungo un angolo), a un generatore di gradienti radiali (spotlight da un centro, cerchio o ellisse, con controllo di dimensione e posizione) e a un generatore di gradienti conici (colori che ruotano attorno a un punto per ruote cromatiche e grafici). Ogni tipo espone esattamente i controlli di cui ha bisogno: un angolo per il lineare, forma/dimensione/posizione per il radiale, un angolo iniziale e il centro per il conico.
Aggiungi un numero illimitato di color stop, trascinali per riposizionarli, e imposta un'opacità per singolo stop per creare gradienti trasparenti con rgba(). Fai clic sulla barra per aggiungere un nuovo stop esattamente dove vuoi. La maggior parte degli strumenti concorrenti come Colorzilla supporta solo due o tre stop; qui non c'è limite, quindi gradienti complessi a cinque o sei stop sono semplici quanto quelli a due colori.
Copia CSS, Tailwind o SCSS — ed esporta un PNG
L'output è a portata di tab. La scheda CSS fornisce una dichiarazione background pronta con un fallback opzionale -webkit- (angolo convertito correttamente per i browser legacy). La scheda Tailwind produce le utility idiomatiche bg-gradient-to-r from-[...] to-[...] per i gradienti lineari, ricorrendo a un valore arbitrario bg-[linear-gradient(...)] per radiali e conici. La scheda SCSS racchiude il valore in una variabile $gradient riutilizzabile.
Hai bisogno di un'immagine raster? Scarica PNG dipinge il gradiente esatto su un canvas a 1600x900 — un vero download del gradiente in PNG senza filigrana e senza passaggi server. Adobe Express mette questa funzione dietro un abbonamento. TinyWow richiede un caricamento del file. Qui è gratuito e nulla lascia il tuo dispositivo.
Genera un gradiente da un'immagine
Vuoi un gradiente che si abbini a una foto del brand, a uno screenshot o a un'immagine di prodotto? Usa Da immagine: lo strumento campiona i pixel dell'immagine direttamente nel tuo browser, trova i colori dominanti e crea un gradiente a più stop da essi, ordinati dal chiaro allo scuro per una sfumatura uniforme. Poiché l'analisi avviene in locale, l'immagine non viene mai caricata da nessuna parte.
Da lì puoi regolare gli stop estratti, cambiare l'angolo, ridurre l'opacità di un colore, o passare a una sfumatura radiale o conica. È il modo più rapido per creare uno snippet di sfondo gradiente CSS che colleghi una sezione hero, una card o un pulsante a un'immagine esistente — senza plugin Figma o estensioni Adobe.
Preset, randomizzatore e link condivisibili
Non sai da dove iniziare? Seleziona un preset curato — tramonto, oceano, aurora, menta, pesca e altri — per caricare un gradiente rifinito e poi modificarlo. Premi Casuale per una combinazione di due o tre colori fresca e armoniosa. È un ottimo punto di partenza quando hai bisogno di qualcosa di esteticamente piacevole senza dedicare tempo alla teoria del colore.
Ogni modifica che apporti viene codificata nell'URL della pagina, quindi Copia link consegna a un collega esattamente il gradiente che stai guardando — nessun export, nessun account, nessuno screenshot. Il link contiene colori, tipo, angolo e stop, e funziona interamente lato client senza alcuna chiamata al server. Una cosa che strumenti come Figma e Canva non possono fare senza un account.
Privato e gratuito — nessun upload, nessun account
Non è richiesta registrazione, non ha costi, e non c'è nulla da caricare. Questo strumento per gradienti CSS gira interamente sul tuo dispositivo usando JavaScript e un canvas HTML, quindi i colori riservati del brand e i design non ancora pubblicati non lasciano mai il tuo browser. Aggiungilo ai preferiti come generatore di riferimento per gradienti lineari, radiali e conici per sfondi, pulsanti, sezioni hero, overlay e grafici. Copia CSS, Tailwind o SCSS, o esporta un PNG, ogni volta che ne hai bisogno. Funziona ugualmente bene su iPhone, Android, Windows e Mac.
Frequently asked questions
Come si crea un gradiente CSS?
Imposta la proprietà background (o background-image) su una funzione di gradiente. Il più semplice è un gradiente lineare a due colori: background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%); — crea una sfumatura da sinistra a destra dall'indaco al rosa. Scegli i tuoi colori e l'angolo qui sopra, poi copia la riga background già pronta direttamente nel tuo foglio di stile. Non è necessario scrivere la sintassi a mano — il generatore la costruisce mentre trascini ogni stop nella posizione desiderata.
Qual è la differenza tra gradiente lineare, radiale e conico?
Un linear-gradient sfuma i colori lungo una linea retta all'angolo che scegli (es. 90deg = da sinistra a destra). Un radial-gradient sfuma verso l'esterno da un punto centrale in cerchi o ellissi, come un riflettore. Un conic-gradient ruota i colori attorno a un punto centrale come le lancette di un orologio, rendendolo perfetto per ruote cromatiche e grafici a torta. Questo strumento costruisce tutti e tre; puoi passare da uno all'altro con i pulsanti Lineare / Radiale / Conico. La maggior parte degli strumenti gratuiti come il generatore di sfondi di Canva offre solo gradienti lineari, e cssgradient.io non supporta affatto i gradienti conici.
Come si crea uno sfondo gradiente in CSS?
Applica un gradiente alla proprietà background di qualsiasi elemento. Per uno sfondo a pagina intera prova: body { background: linear-gradient(135deg, #2193b0 0%, #6dd5ed 100%); min-height: 100vh; }. Poiché un gradiente conta come un'immagine, puoi anche aggiungere background-attachment: fixed; in modo che rimanga fisso mentre la pagina scorre. Costruiscilo visivamente qui sopra e copia il CSS. Non hai bisogno di Figma, Canva, o nessun altro strumento di design. Funziona allo stesso modo su tutti i browser moderni senza prefissi nel 2026.
Come si aggiungono più di due colori a un gradiente?
Aggiungi color stop aggiuntivi, ognuno con la propria posizione. Fai clic in qualsiasi punto della barra del gradiente (o sul pulsante + Aggiungi stop) per inserire un nuovo stop, poi trascinalo dove vuoi. Con tre colori si ottiene qualcosa come linear-gradient(90deg, #ff0000 0%, #ffff00 50%, #00ff00 100%). Non esiste un limite reale — aggiungi tutti gli stop necessari al tuo design. A differenza di coolors.co che mostra solo palette di colori senza il CSS, o di Canva che blocca la modifica dei gradienti dietro un account, questo strumento genera subito CSS pronto per la produzione con stop illimitati.
Come si imposta l'angolo o la direzione del gradiente?
Per un gradiente lineare il primo valore è l'angolo: 0deg punta verso l'alto, 90deg verso destra, 180deg verso il basso, 270deg verso sinistra. Puoi anche usare parole chiave come 'to right' o 'to bottom right', quindi linear-gradient(to right, ...) è identico a linear-gradient(90deg, ...). Trascina lo slider Angolo o fai clic su una freccia di direzione qui sopra e il valore si aggiorna in tempo reale. Il CSS di output si aggiorna in diretta in modo da poterlo copiare e incollare in qualsiasi foglio di stile o framework.
Servono ancora i prefissi -webkit- per i gradienti nel 2026?
Nel 2026, no. linear-gradient, radial-gradient e conic-gradient sono supportati senza prefisso in ogni browser attuale, quindi un semplice background: linear-gradient(...) è sufficiente. Dovresti aggiungere -webkit- solo per versioni molto vecchie di Safari/iOS (precedenti al 2017) o WebView Android legacy. Seleziona 'Aggiungi prefisso -webkit-' nell'output CSS e lo strumento emette una riga di fallback correttamente convertita sopra quella standard. La conversione dell'angolo (90deg diventa 270deg nella versione webkit) è gestita automaticamente.
Come si crea un gradiente in Tailwind CSS?
Usa le utility per i gradienti: una classe di direzione più i colori from-, via- e to-, es. bg-gradient-to-r from-indigo-500 to-pink-500. Per colori precisi usa valori arbitrari: bg-gradient-to-r from-[#6366f1] to-[#ec4899]. Passa la scheda di output su Tailwind per copiare le classi del tuo gradiente attuale, incluso un valore arbitrario bg-[linear-gradient(...)] per i gradienti radiali e conici, per i quali Tailwind non ha scorciatoie predefinite. La maggior parte delle risorse sui gradienti Tailwind non copre questo caso limite.
Come si esporta un gradiente come immagine PNG?
Fai clic su Scarica PNG. Lo strumento dipinge il tuo gradiente esatto su un canvas HTML a 1600x900 e lo salva come file .png, ideale per uno sfondo di presentazione, un banner per i social o un mockup di design. Viene renderizzato interamente nel browser, quindi nulla viene caricato. A differenza di TinyWow che richiede l'upload del file su un server, o di Adobe Express che mette l'esportazione PNG dietro un paywall in abbonamento, qui non ci sono rischi per la privacy né costi. Hai bisogno di un'altra dimensione? Ridimensiona o ritaglia il PNG in qualsiasi editor di immagini in seguito.
Come si crea un gradiente da un'immagine?
Fai clic su 'Da immagine' e scegli una foto. Lo strumento legge i pixel in locale, trova i colori più comuni e crea un gradiente da essi — un modo rapido per abbinarsi a una foto del brand o a un'immagine di prodotto. La tua immagine non lascia mai il tuo dispositivo; viene analizzata nel browser e scartata immediatamente. A differenza di Adobe Color o Coolors che richiedono un upload o un account per estrarre le palette, tutto rimane privato sul tuo computer. Puoi poi regolare gli stop estratti, cambiare l'angolo, o passare a radiale o conico.
Cos'è un gradiente conico e quando si usa?
Un gradiente conico ruota i suoi colori attorno a un punto centrale anziché lungo una linea, quindi la transizione si muove come la lancetta di un orologio. conic-gradient(from 0deg, red, yellow, green, blue, red) crea una ruota cromatica completa. Sono ideali per grafici a torta, grafici a ciambella, anelli di avanzamento, selettori di colore ed effetti di luce angolari. Il supporto browser è stabile dal 2021 su Chrome, Firefox, Safari e Edge senza prefissi. Seleziona Conico qui sopra, imposta l'angolo iniziale e la posizione del centro, e sperimenta. La maggior parte degli strumenti generatori di gradienti non supporta affatto il tipo conico.
Come si crea un gradiente uniforme o trasparente?
Assegna a uno stop un valore alpha. Abbassa lo slider Opacità su uno stop e il CSS passa a rgba(). Ad esempio, linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%) sfuma da trasparente a nero al 60%, lo scrim classico dietro il testo su una foto. Suggerimento: sfuma tra lo stesso colore (da trasparente a solido dello stesso tono) per evitare un punto medio grigio e opaco che i browser producono quando sfumano tra due colori completamente trasparenti di tonalità diverse. Lo strumento gestisce automaticamente l'output rgba quando si regola l'opacità degli stop.
Questo generatore di gradienti è migliore di cssgradient.io o Colorzilla?
Il generatore di gradienti di UtiloKit copre tutto ciò che fanno quegli strumenti — tipi di gradiente lineare, radiale e conico, editor multi-stop, copia del codice — più output Tailwind CSS, download PNG, estrazione del gradiente da immagine, link condivisibili e supporto ai gradienti animati. cssgradient.io non supporta i gradienti conici e non ha output Tailwind. L'editor di gradienti di Colorzilla è un'estensione browser e non esporta PNG né Tailwind. Tutto qui gira nel tuo browser senza upload, senza registrazione e senza annunci che bloccano le funzioni.
Posso usare questo generatore di gradienti su iPhone o Android?
Sì. Lo strumento è completamente responsive e funziona in qualsiasi browser mobile moderno. Aprilo in Safari su iPhone o Chrome su Android, crea il tuo gradiente e copia il CSS direttamente negli appunti. Poiché tutto gira lato client, non è richiesto nessun download e funziona anche con connessioni mobili lente una volta caricata la pagina. L'editor di stop basato sul trascinamento si adatta all'input touch, quindi creare gradienti a più stop su un telefono è semplice.
Related tools
Vedi tutti gli strumenti
Novità Generatore di glassmorphism
Progetta una card in vetro smerigliato e copia il CSS, con anteprima in tempo reale.
Novità Generatore di text-shadow CSS
Regola un’ombra del testo CSS con anteprima in tempo reale e copia il codice.
Novità Mixer di colori
Mescola due colori a qualsiasi proporzione e copia il risultato o qualsiasi passaggio.
Novità Selettore colori da immagine
Scegli qualsiasi colore da un’immagine ed estrai la palette dominante in HEX, RGB e HSL.
Novità Pixel Art Maker
Draw pixel art on a customizable grid, pick colors, and export as PNG — in your browser.
Novità Color Token Generator
Generate a full design-token scale (50–950 shades) from a single base color — CSS, Tailwind or JSON.