Generatore di sfumature

Crea sfumature lineari, radiali e coniche ed esporta CSS o un'immagine

I file non lasciano il dispositivo
Funziona nel browser
Gratis, senza account, senza filigrana

Color stops

Click the bar to add a stop. Drag handles to move them; arrow keys nudge, Delete removes.

Code

background: linear-gradient(135deg, #4f46e5 0%, #5d45e5 3.13%, #6a44e5 6.25%, #7643e3 9.38%, #8243e1 12.5%, #8d42de 15.63%, #9742db 18.75%, #a141d6 21.88%, #ab41d1 25%, #b541cc 28.13%, #be42c6 31.25%, #c642bf 34.38%, #cf42b8 37.5%, #d743b1 40.63%, #de44a9 43.75%, #e546a1 46.88%, #ec4899 50%, #f14b90 53.13%, #f54e87 56.25%, #f8527e 59.38%, #fb5775 62.5%, #fe5b6c 65.63%, #ff6063 68.75%, #ff665a 71.88%, #ff6c51 75%, #ff7247 78.13%, #ff783e 81.25%, #ff7e35 84.38%, #ff842b 87.5%, #fd8b21 90.63%, #fb9118 93.75%, #f89810 96.88%, #f59e0b 100%);
background: linear-gradient(in oklch 135deg, #4f46e5 0%, #ec4899 50%, #f59e0b 100%);

The first line is a fallback with precomputed stops for browsers without “in oklab/oklch” support.

Come usare Generatore di sfumature

Crea sfumature lineari, radiali e coniche con tutti gli stop di colore che vuoi, miscelati in sRGB, OKLab o OKLCH. Copia il risultato come CSS, una classe Tailwind o SVG, oppure scaricalo come immagine PNG, JPG o WebP fino a 8192 px per lato.

1
Scegli un Tipo (Lineare, Radiale o Conica) e imposta l'Angolo, la Forma o il centro; per radiale e conica puoi trascinare sull'anteprima per spostare il centro.
2
Modifica gli Stop di colore: fai clic sulla barra per aggiungere uno stop, trascina le maniglie per spostarli e cambia colore e posizione di ciascuno nell'elenco.
3
Scegli come Miscelare i colori in (sRGB, OKLab o OKLCH), oppure parti da uno dei Preset o da Casuale.
4
Copia il codice dalla scheda CSS, Tailwind o SVG.
5
Per un'immagine, imposta Larghezza e Altezza o scegli una dimensione, scegli PNG, JPG o WebP e fai clic su Scarica.

Domande frequenti

Qual è la differenza tra la miscelazione sRGB, OKLab e OKLCH?

sRGB è la miscelazione CSS classica, in cui i colori complementari possono diventare grigi al centro. OKLab è percettivamente uniforme, senza punti medi sporchi. OKLCH tiene i colori vivi spostandosi lungo la ruota delle tinte.

Le sfumature OKLab e OKLCH funzionano nei browser più vecchi?

L'output CSS inizia con una riga di riserva che usa stop precalcolati per i browser senza il supporto di “in oklab” o “in oklch”. Anche il codice SVG e le immagini scaricate usano stop precalcolati, quindi hanno lo stesso aspetto ovunque.

Perché la scheda SVG è disattivata per le sfumature coniche?

SVG non ha una sfumatura conica. Scarica invece un'immagine PNG, JPG o WebP.

Posso usare stop trasparenti?

Sì, i colori con alfa come rgba() o #rrggbbaa funzionano. Scarica PNG o WebP per conservare la trasparenza, perché JPG non ha un canale alfa.

L'immagine viene creata su un server?

No. L'immagine viene disegnata su un canvas nel browser e salvata direttamente, a qualsiasi dimensione da 1 a 8192 px per lato.

Come regolo uno stop con la tastiera?

Metti a fuoco una maniglia dello stop e usa i tasti freccia per spostarlo dell'1% (Maiusc per il 10%), Home o Fine per saltare alle estremità e Canc per rimuoverlo. Una sfumatura tiene sempre almeno due stop.