Generatore di gradienti CSS

Crea gradienti CSS lineari, radiali e conici con miscelazione OKLCH o OKLab e fallback sRGB, poi copia CSS, Tailwind o SVG, o scarica un PNG.

Funziona interamente nel tuo browser - i tuoi gradienti non vengono caricati da nessuna parte.

Punti colore

Fai clic sulla barra per aggiungere un punto e trascina un punto per spostarlo. Con un punto selezionato, i tasti freccia lo spostano e Canc lo elimina.

ColoreHexPosizione (%)

Tipo

Angolo (°)

Ripeti

Preimpostazioni

Miscela i colori in

Gli stessi punti, miscelati in tre modi. Il classico sRGB può diventare grigio o spento tra colori lontani; OKLab mantiene la luminosità uniforme e OKLCH conserva l'intensità del colore. I browser che non conoscono OKLab o OKLCH ricevono un fallback sRGB dall'aspetto identico.

Testo sopra

Testo bianco: 2,1:1; Troppo basso
Testo nero: 4,2:1; AA solo testo grande

Il contrasto più basso in qualsiasi punto del gradiente. WCAG AA richiede 4,5:1 per il testo normale e 3:1 per il testo grande.

Codice

Formato

background: linear-gradient(90deg, #0077a3 0%, #1178a2 1.56%, #1b79a1 3.13%, #2a7b9f 6.25%, #367d9c 9.38%, #3f7f9a 12.5%, #608591 25%, #959179 50%, #ad956b 62.5%, #c59959 75%, #dd9c41 87.5%, #e99d2f 93.75%, #ef9d22 96.88%, #f29e19 98.44%, #f59e0b 100%);
background: linear-gradient(in oklab 90deg, #0077a3 0%, #f59e0b 100%);

Dimensioni immagine

Crea un gradiente CSS a occhio e copia codice che funziona ovunque. Scegli lineare, radiale o conico, trascina i punti colore e decidi come si miscelano i colori: i browser moderni possono miscelare in OKLab o OKLCH, evitando la zona grigia e spenta dei classici gradienti sRGB, e il codice include un fallback sRGB equivalente per quelli più vecchi. Vedi anche se il testo bianco o nero resta leggibile sopra, e puoi esportare una classe Tailwind, un SVG o un PNG di qualsiasi dimensione.

Domande frequenti

Che differenza c'è tra i gradienti sRGB, OKLab e OKLCH?

Sono modi diversi di calcolare i colori tra due punti. I classici gradienti CSS miscelano in sRGB, che può virare al grigio (dal blu al giallo si passa per un grigio spento) o scurirsi al centro. OKLab è progettato perché passi uguali appaiano uguali, così la miscela resta uniformemente luminosa. OKLCH miscela separatamente luminosità, intensità del colore e tinta, quindi percorre la ruota dei colori e resta vivace - dal rosso al blu si passa per il viola invece che per un malva scuro. Scrivi «in oklab» o «in oklch» dentro il gradiente per usarli.

Il gradiente OKLCH funziona in tutti i browser?

Chrome ed Edge 111+, Safari 16.2+ e Firefox 127+ capiscono «in oklch» e «in oklab». Per i browser più vecchi il codice contiene due righe «background»: la prima è un semplice gradiente sRGB con punti intermedi aggiuntivi, così appare quasi identico, e la seconda è quella moderna. I browser saltano la riga che non capiscono, così ognuno ottiene la versione migliore che riesce a disegnare.

Come lo uso con Tailwind CSS?

Scegli «Classe Tailwind» e copiala: è un valore arbitrario come bg-[linear-gradient(in_oklab_90deg,_#0077a3_0%,_#f59e0b_100%)], con gli spazi scritti come trattini bassi, come richiede Tailwind. Incollala in class - nessuna configurazione necessaria.

Perché non posso scaricare un gradiente conico come SVG?

SVG ha solo gradienti lineari e radiali e non può ripetere un gradiente radiale come fa CSS. In questi casi scarica un PNG: viene disegnato pixel per pixel con gli stessi calcoli, quindi corrisponde esattamente al CSS, in qualsiasi dimensione tu scelga.

Il link di condivisione è privato?

Il gradiente è memorizzato dopo il # nel link, una parte che i browser non inviano mai a un server, e la pagina viene disegnata interamente nel tuo browser. Non viene caricato nulla, e il gradiente resta salvato solo su questo dispositivo, così lo ritrovi quando torni.