Creatore di gradienti

Gradienti OKLCH percettivamente uniformi, senza bande grigie, esportazione CSS con un clic.

Profilo →Posizione0%

Profilo →Posizione100%

Angolo90°Interpolazione fluida (senza zone morte)

Libreria di gradienti

48 combinazioni classiche della community — clicca per applicare punti, tipo e angolo in un solo passaggio.

Tramonto

Oceano

Foresta

Caramella

Crepuscolo

Smorzato

Codice CSS

background: linear-gradient(90deg, #1D3557 0%, 463C7B 25%, 7B3C8A 50%, B4387B 75%, #E63946 100%);

Come funziona lo strumento gradient: crea le interruzioni, regola, copia CSS.

2-6 interruzioni con posizionamento libero, interpolazione OKLCH senza bande opache, più 48 preset curati.

01
Crea le interruzioni
2-6 interruzioni: scegli ogni colore, trascina le posizioni o incolla i valori HEX.
02
Regola
Passa da lineare/radiale/conico, trascina l'angolo: oppure applica un preset curato in un clic.
03
Copia
La modalità smooth espande automaticamente i punti medi OKLCH; il CSS è pronto per l'incolla e il link riporta il tuo gradient.

FAQ sui gradient

Quattro domande che gli utenti fanno davvero.

Perché i gradient diventano grigi nel mezzo?: L'interpolazione RGB attraversa territori a bassa saturazione. L'interpolazione OKLCH segue la tonalità, quindi il punto centrale rimane pulito.
Posso aggiungere più punti di interruzione?: Sì - da 2 a 6 punti di interruzione, ognuno con il proprio colore e posizione. La modalità Smooth inserisce punti medi OKLCH tra i vicini, in modo che l'intera rampa rimanga pulita.
Quali browser supportano il CSS esportato?: Tutti i browser moderni. Lo strumento genera punti di interruzione RGB semplici, quindi non è necessaria alcuna conversione anche per i motori più vecchi.
Come condivido un gradiente?: Ogni modifica viene sincronizzata nell'URL della pagina (#g=...). Invia il link della barra degli indirizzi a un collega e si aprirà esattamente come l'hai configurato.

Dopo aver ottenuto il risultato

Continua da qui e metti i colori al lavoro.

Generatore di Scale

Trasforma qualsiasi colore in una scala di sistema di design a 11 gradini, percettivamente uniforme in OKLCH, con contrasto WCAG per ogni gradino, esportazione in Tailwind/CSS/SCSS/JSON.

Convertitore di colori

Digita qualsiasi formato (HEX / RGB / HSL / nome) e converti in tutti gli spazi colore in tempo reale.

Tavola di palette

Barra spaziatrice per randomizzare, bloccare, trascinare per riordinare, condividere tramite URL — tutto ciò che una tavola di palette dovrebbe fare.

Controllore di contrasto

Convalida del contrasto WCAG 2.1 tra qualsiasi colore di primo piano e sfondo.

Come funziona lo strumento gradient: crea le interruzioni, regola, copia CSS.

2-6 interruzioni con posizionamento libero, interpolazione OKLCH senza bande opache, più 48 preset curati.

Crea le interruzioni

2-6 interruzioni: scegli ogni colore, trascina le posizioni o incolla i valori HEX.

Regola

Passa da lineare/radiale/conico, trascina l'angolo: oppure applica un preset curato in un clic.

Copia

La modalità smooth espande automaticamente i punti medi OKLCH; il CSS è pronto per l'incolla e il link riporta il tuo gradient.

FAQ sui gradient

Quattro domande che gli utenti fanno davvero.

Perché i gradient diventano grigi nel mezzo?

L'interpolazione RGB attraversa territori a bassa saturazione. L'interpolazione OKLCH segue la tonalità, quindi il punto centrale rimane pulito.

Posso aggiungere più punti di interruzione?

Sì - da 2 a 6 punti di interruzione, ognuno con il proprio colore e posizione. La modalità Smooth inserisce punti medi OKLCH tra i vicini, in modo che l'intera rampa rimanga pulita.

Quali browser supportano il CSS esportato?

Tutti i browser moderni. Lo strumento genera punti di interruzione RGB semplici, quindi non è necessaria alcuna conversione anche per i motori più vecchi.

Come condivido un gradiente?

Ogni modifica viene sincronizzata nell'URL della pagina (#g=...). Invia il link della barra degli indirizzi a un collega e si aprirà esattamente come l'hai configurato.