Generatore di gradienti CSS

Come usare il generatore di gradienti CSS

1. Scegli un Tipo di gradiente: Lineare, Radiale o Conico. L’anteprima grande in alto si aggiorna a ogni modifica.
2. Per un gradiente lineare, imposta l’Angolo con il cursore o scrivilo in gradi (90° va da sinistra a destra, 180° dall’alto in basso). Per un gradiente conico, l’angolo indica il punto di partenza della rotazione.
3. Per i gradienti radiali e conici, sposta il centro con Centro X e Centro Y. Un gradiente radiale può essere un Cerchio o un’Ellisse (menu Forma).
4. Modifica i Punti di colore. Clicca in un punto qualsiasi della barra per aggiungere lì un punto con il colore che il gradiente ha già in quella posizione, oppure usa Aggiungi punto per riempire lo spazio più ampio. Trascina una maniglia per spostarla. Ogni punto ha anche una riga in cui puoi sceglierne il colore, scrivere un qualsiasi colore CSS, impostare la Posizione (%) o eliminarlo con Rimuovi (un gradiente mantiene almeno due punti).
5. Se vuoi, spunta Ripetuto, scegli l’Interpolazione dei colori, clicca su Inverti per capovolgere i punti o su Gradiente casuale per trovare ispirazione.
6. Copia il risultato da Codice CSS con Copia.

Da tastiera: seleziona una maniglia sulla barra, poi usa i tasti freccia per spostarla dell‘1 % (10 % con Maiusc), Home e Fine per andare agli estremi e Canc per eliminarla.

Le tre funzioni di gradiente

• linear-gradient() sfuma i colori lungo una linea retta. linear-gradient(90deg, #4f46e5 0%, #ec4899 100%) va dall’indaco a sinistra al rosa a destra. Gli angoli si misurano in senso orario partendo dall’alto: 0deg punta in alto, 90deg a destra.
• radial-gradient() si irradia da un punto centrale. radial-gradient(circle at 30% 40%, …) colloca il centro al 30 % da sinistra e al 40 % dall’alto. Un’ellisse si allunga con il riquadro, un cerchio resta rotondo.
• conic-gradient() ruota attorno a un centro come le lancette di un orologio. conic-gradient(from 0deg at 50% 50%, …) crea ruote dei colori, grafici a torta ed effetti di caricamento. Le posizioni dei punti sono frazioni del giro completo.

L’opzione Ripetuto usa repeating-linear-gradient() e le funzioni sorelle: il motivo definito dai tuoi punti si ripete fino a riempire il riquadro. Metti l’ultimo punto ben sotto il 100 % (per esempio al 20 %) per vedere strisce o anelli.

Due punti nella stessa posizione creano un bordo netto invece di una sfumatura: è così che si realizzano strisce e bandiere. Il generatore mantiene i punti ordinati per posizione nel codice, come richiede il CSS.

Interpolazione sRGB o OKLCH

Per impostazione predefinita i browser sfumano i colori del gradiente in sRGB. Tra due colori saturi, come blu e giallo, questo crea spesso una zona centrale grigia o fangosa. Il CSS Color Level 4 permette di scegliere lo spazio di interpolazione: linear-gradient(90deg in oklch, …) sfuma nello spazio percettivo OKLCH e mantiene vivace il centro.

Con OKLCH (più fluida, con ripiego sRGB), lo strumento scrive due dichiarazioni background: prima la classica versione sRGB, poi quella OKLCH. I browser che supportano gli spazi di interpolazione (Chrome ed Edge 111+, Safari 16.2+, Firefox 127+) usano la seconda riga; quelli più vecchi la ignorano e tengono la prima.

Consigli

• Nei campi dei punti sono accettati colori con trasparenza, per esempio #00000080 o rgb(0 0 0 / 50%): comodi per le sovrapposizioni sulle immagini.
• Il codice è scritto con background. Usa invece background-image se imposti separatamente altre proprietà dello sfondo.
• I gradienti delicati (due tinte vicine dello stesso colore) di solito sembrano più professionali delle sfumature arcobaleno.