Generatore di gradienti CSS (anche in OKLCH)
Componi una sfumatura con due o più colori, trascina i punti sulla barra, scegli il tipo (lineare, radiale, conica) e lo spazio in cui calcolarla: in OKLab e OKLCH non compare il grigio sporco a metà tra due colori. Copi il codice CSS (con la versione per i browser vecchi) o scarichi l’immagine per lo sfondo di una presentazione.
Colori
Trascina i pallini per spostare i colori; tocca la barra per aggiungerne uno in quel punto.
Codice CSS
Immagine
Come si usa
- Scegli un esempio o i tuoi colori, e trascina i punti sulla barra.
- Scegli tipo, angolo e spazio della sfumatura.
- Copia il CSS o scarica l’immagine.
Perché nel browser
Tutto si calcola nel tuo browser: i colori e le immagini non vengono mandati a nessun server, niente registrazione e niente pubblicità. I calcoli seguono le regole dei CSS moderni (CSS Color 4), quindi i risultati sono gli stessi che vedrai nel browser.
Domande frequenti
Perché in sRGB a metà compare un grigio?
Perché la sfumatura classica fa la media dei valori rosso, verde e blu: tra due colori opposti (giallo e blu) la media è grigia. In OKLab la media segue la vista umana e il passaggio è pulito; in OKLCH si gira sulla ruota dei colori e i colori restano vivi.
Il codice funziona in tutti i browser?
Con OKLab e OKLCH il codice ha due righe: la prima è per i browser vecchi (con tanti colori intermedi già calcolati), la seconda usa «in oklab» o «in oklch», che i browser recenti capiscono. Il risultato è lo stesso.
Posso usare l’immagine come sfondo?
Sì: scegli le misure (per esempio 1920×1080 per una presentazione o lo sfondo del computer) e scarica PNG, JPG o WebP.
Le immagini e i colori finiscono su un server?
No: tutto avviene nel browser, sul tuo computer o sul telefono. Puoi anche staccare internet dopo aver aperto la pagina.
Strumenti correlati
Ti serve uno strumento che qui non c'è, o un'app per la tua scuola? Scrivimi: valuto i nuovi strumenti e costruisco app su misura.
Scrivimi