Crea gradienti lineari, radiali e conici con punti colore illimitati, interpolazione OKLCH-aware e output utility Tailwind v4. Anteprima dal vivo, oltre 30 preset, nel tuo browser.
Lineare sfuma lungo una linea retta a un angolo scelto (0° = verso l'alto, 90° = verso destra). Radiale sfuma da un punto centrale verso l'esterno — cerchio o ellisse, con parole chiave di dimensione come farthest-corner. Conico ruota attorno a un punto centrale — i punti colore si dispongono ad angoli come le lancette di un orologio. Il conico è ottimo per grafici a torta, indicatori a quadrante e sfondi sintetici tipo color-wheel.
Quando si transita tra tonalità non analoghe — ad esempio blu → giallo, o rosso → verde. L'interpolazione sRGB di default passa attraverso un punto intermedio grigio torbido; OKLCH (CSS Color Module 4 in oklch) mantiene il punto intermedio vivido perché interpola in uno spazio percettivamente uniforme. Per gradienti a due punti tra tonalità simili la differenza è piccola. Per gradienti multi-punto o ad ampio range cromatico, OKLCH è drasticamente migliore.
Lineari / radiali / conici, OKLCH uniforme, Tailwind-aware — più qualche piccolo accorgimento che lo rende davvero piacevole da usare.
Lineare con angolo 0-360°, radiale con cerchio/ellisse + dimensione + posizione, conico con angolo iniziale + posizione. Tutti producono sintassi CSS Images Module Level 4 conforme agli standard.
Aggiungi punti a qualsiasi percentuale, trascina lo slider di posizione per la regolazione fine, clicca sulla campionatura per scegliere un colore o incolla un HEX. I punti si ordinano automaticamente nell'output. Clicca × per rimuovere (minimo 2 punti).
Passa dall'interpolazione sRGB di default a quella moderna in oklch. OKLCH offre punti intermedi percettivamente più uniformi — niente bande grigie torbide nei salti di tonalità. Fallback graceful sui browser che non supportano ancora CSS Color 4.
Tre pannelli di output si aggiornano dal vivo: CSS grezzo (background-image: linear-gradient(...)), utility Tailwind v4 con valore arbitrario (bg-[linear-gradient(...)]) e snippet di design token JSON pronto per Style Dictionary o Figma Tokens.
Sunset, Ocean, Aurora, Cyber, Royal, Neon Pink, Iris, Bullseye, Conic Wheel — clicca per caricarli e modificarli. Ogni preset è un punto di partenza di reale qualità di produzione, non solo un nome.
Anteprima renderizzata con background-image nativo, così quello che vedi è esattamente ciò che il tuo foglio di stile produrrà. Ogni pixel è elaborato localmente — apri DevTools → Network e verifica zero richieste in uscita.
Quattro passi da pagina vuota a CSS, Tailwind o JSON pronti per la produzione.
Lineare per sfondi, header, sezioni hero. Radiale per riflettori, vignettature, pulsanti luminosi. Conico per grafici a torta, ruote di colori e sfondi sintetici di tendenza. Passa dall'uno all'altro con le tab — i tuoi punti colore vengono mantenuti durante il cambio.
Clicca sulla campionatura di colore per aprire un selettore, o incolla direttamente un HEX nel campo. Trascina lo slider per impostare la posizione del punto da 0 a 100%. Clicca + Aggiungi punto per inserire un nuovo punto nel gap più ampio (con un colore intermedio). Fino a 12 punti in totale.
Per il lineare, imposta l'angolo (0° punta verso l'alto, 90° a destra). Per il radiale, scegli forma, parola chiave di dimensione e posizione del centro. Per il conico, imposta l'angolo iniziale. Imposta Interpolazione del colore su OKLCH per punti intermedi percettivamente uniformi nei gradienti multi-tonalità.
Tre pannelli si aggiornano dal vivo: CSS (background-image:...), Tailwind v4 (bg-[...]), JSON (forma design-token). Usa l'icona di copia su ciascuno, oppure premi Scarica CSS per salvare un file gradient.css pronto da inserire in un progetto.
Quattro scenari comuni in cui uno strumento browser-first orientato alla privacy batte l'apertura di Figma + un sito separato per gradienti.
Scegli un preset vicino al tuo brand, inserisci i due colori del brand nei punti, passa all'interpolazione OKLCH per un punto intermedio pulito. Copia il CSS, incollalo nel foglio di stile della tua hero. Tempo totale: meno di 2 minuti.
Crea una volta un gradiente di brand a 3 punti, copialo come design token JSON, inseriscilo in Style Dictionary / Figma Tokens. Ora ogni pulsante + card su ogni piattaforma usa lo stesso gradiente per riferimento. Aggiorna in un solo punto, si propaga ovunque.
I gradienti conici sintetici sono perfetti per visualizzazioni a torta, indicatori di progresso a quadrante o stati di shimmer 'data-loading'. Scegli il tipo conico, imposta l'angolo iniziale, posiziona i punti alle percentuali giuste — la matematica fa corrispondere esattamente angoli 0-360° a posizioni percentuali.
Crea il gradiente, imposta le proporzioni per adattarle al tuo target (16:9 per le slide, 1:1 per IG, 3:1 per l'header di X), fai uno screenshot dell'anteprima. Oppure copia il CSS in un file HTML usa-e-getta e fai uno screenshot nel tuo browser alla dimensione esatta in pixel di cui hai bisogno.
I tuoi colori e gradienti non lasciano mai il tuo dispositivo. Apri DevTools → Network e vedrai zero richieste in uscita durante qualsiasi operazione.
background-image CSS nativo — quindi il gradiente renderizzato corrisponde esattamente a quello che il tuo foglio di stile produrrà nei browser dei tuoi utenti.
Letture selezionate sui gradienti CSS, sull'interpolazione OKLCH e sui sistemi di design token.
Why OKLCH replaces HSL for design systems: perceptual lightness, predictable chroma, wide-gamut support.
From sRGB linearization to relative luminance — every step of the contrast formula, with worked examples.
Lineare sfuma lungo una linea retta a un angolo scelto (0° = verso l'alto, 90° = verso destra). Radiale sfuma da un punto centrale verso l'esterno — cerchio o ellisse, con parole chiave di dimensione come farthest-corner. Conico ruota attorno a un punto centrale — i punti colore si dispongono ad angoli come le lancette di un orologio. Il conico è ottimo per grafici a torta, indicatori a quadrante e sfondi sintetici tipo color-wheel.
Quando si transita tra tonalità non analoghe — ad esempio blu → giallo, o rosso → verde. L'interpolazione sRGB di default passa attraverso un punto intermedio grigio torbido; OKLCH (CSS Color Module 4 in oklch) mantiene il punto intermedio vivido perché interpola in uno spazio percettivamente uniforme. Per gradienti a due punti tra tonalità simili la differenza è piccola. Per gradienti multi-punto o ad ampio range cromatico, OKLCH è drasticamente migliore.
Una utility con valore arbitrario che puoi incollare direttamente in JSX / Blade / HTML: bg-[linear-gradient(45deg,#ff6b6b_0%,#feca57_50%,#ff9ff3_100%)]. Nessuna modifica a tailwind.config.js; funziona su qualsiasi progetto Tailwind 4. Se preferisci token di colore con nome, copia invece il CSS e converti a mano.
I gradienti lineari e radiali sono universalmente supportati dal 2014. I gradienti conici sono arrivati su tutti i browser evergreen entro il 2021. La parola chiave di interpolazione in oklch è supportata in Chrome 111+, Safari 16.2+, Firefox 113+. Se devi supportare browser più vecchi, usa l'interpolazione sRGB di default — la differenza visiva conta soprattutto per gradienti multi-punto con salti di tonalità.
No. La generazione delle stringhe del gradiente, la serializzazione CSS / Tailwind / JSON e l'anteprima dal vivo girano tutti in JavaScript sul tuo dispositivo. Apri DevTools → Network e vedrai zero richieste in uscita durante qualsiasi operazione. Incolla colori del brand, token interni — nulla lascia il tuo computer.