Generatore di gradienti CSS
CSS Gradient Builder
Costruisce gradienti lineari, radiali e conici trascinando i punti di arresto ed esporta il CSS in sRGB o in OKLCH.
Costruisce un gradiente lineare, radiale o conico ed emette il CSS, compresa la clausola di interpolazione `in oklch` che decide che cosa succede fra gli stop. Gli stessi stop vengono sempre disegnati una seconda volta in sRGB qui sotto, perché l’argomento a favore dell’interpolazione in uno spazio percettivo è un argomento visivo e quattro centimetri di gradiente lo dicono più in fretta di un paragrafo.
Gli stessi stop in sRGB, per confronto. Se il centro di questa striscia sembra slavato accanto a quella sopra, è lo spazio di interpolazione che fa il suo lavoro: una retta nel cubo sRGB fra due tonalità opposte passa vicino all’asse dei grigi.
Gira intorno alla ruota delle tonalità, così il punto di mezzo tiene il suo croma. È il valore predefinito, ed è il motivo per cui il CSS si è dotato di questa sintassi.
Stop
- 0%
- 100%
Preimpostazioni
CSS
background-image: linear-gradient(135deg in oklch, #5b6cff 0%, #22d3ee 100%);La clausola in oklch richiede un browser del 2023 o più recente. I motori più vecchi buttano via l’intera dichiarazione invece di ripiegare su altro, quindi affiancale una sfumatura sRGB normale in una dichiarazione precedente se li devi supportare.
Come si usa
Scegliere il tipo, poi l’angolo
Il lineare viaggia in linea retta, il radiale si espande da un punto, il conico ne gira intorno. L’angolo si applica al lineare e al conico; il radiale prende invece una forma e un centro.
Collocare gli stop
Ogni stop ha un colore e una posizione da 0 a 100%. Due è il minimo; aggiungendone uno le posizioni vengono ridistribuite in modo uniforme e poi si possono spostare. I preset sono un modo rapido di vedere come si comportano tre o quattro stop.
Scegliere lo spazio di interpolazione: è questa la decisione vera
L’OKLCH tiene il croma per tutta la parte centrale, ed è ciò che impedisce al blu-giallo di diventare grigio a metà strada. L’OKLab prende il percorso percettivo più breve ed è quello giusto quando i due stop sono vicini di tonalità. L’sRGB è il comportamento storico, e va scelto deliberatamente se serve che i browser vecchi ottengano lo stesso risultato dei nuovi.
In uno spazio polare, decidere da che parte girare
OKLCH, LCH e HSL sono polari, quindi fra due tonalità qualsiasi ci sono due archi. `shorter` è il valore predefinito e di solito è quello che serve; `longer` trasforma un gradiente a due stop in un arcobaleno, che ogni tanto è esattamente l’effetto voluto.
Copiare il valore o l’intera dichiarazione
Il valore va dentro un `background-image` esistente; la dichiarazione è pronta da incollare così com’è.
Domande frequenti
`in oklch` funzionerà in tutti i browser?
No. Serve un motore dal 2023 in poi, e uno più vecchio scarta l’intera dichiarazione invece di ripiegare sull’sRGB: qui non esiste un supporto parziale. Basta mettere un gradiente sRGB semplice in una dichiarazione precedente e lasciare che il motore più recente la sovrascriva: è il normale ripiego della cascata CSS e costa una riga in più.
Perché la striscia sRGB diventa grigia a metà?
Perché interpolare in sRGB traccia una linea retta attraverso il cubo dei colori, e la linea fra due tonalità grosso modo opposte passa vicino all’asse neutro. Nel gradiente non c’è niente di sbagliato: sta facendo esattamente quello che dicono i numeri, e i numeri non hanno mai riguardato l’aspetto del colore.
Il mio gradiente ha bande visibili. Questo strumento può risolverle?
Non direttamente. Le bande sono l’uscita a 8 bit che quantizza una rampa lenta su una superficie ampia, e nessuna scelta dello spazio di interpolazione le elimina. Le risposte consuete sono una velatura di rumore, una texture ripetuta appena percettibile oppure far percorrere al gradiente una distanza più breve. Questo strumento emette solo CSS e non fa alcun dithering.
Posso esportarlo come immagine?
No. L’uscita è un valore CSS, che pesa meno di qualunque immagine equivalente, è indipendente dalla risoluzione ed è animabile. Se serve un file raster — per un modello di e-mail, per esempio, dove i gradienti CSS sono inaffidabili — si può fare una schermata dell’anteprima oppure costruirlo nel generatore di motivi, che disegna su un canvas.
Può ricevere da
Generatore di ombre CSS
Box Shadow Generator
Compone ombre di riquadro e di testo su più livelli con anteprima dal vivo e restituisce il CSS.
Generatore di sfondi a motivo
Background Pattern Generator
Genera motivi SVG ripetibili senza giunte — righe, pois, griglie, grana — con controlli di colore e di scala.
Selettore di colore
Colour Picker
Sceglie un colore su un campo OKLCH, con il contagocce sullo schermo o da un’immagine caricata, e lo copia nella notazione che vuoi.
Convertitore di codici colore
Colour Format Converter
Converte un colore tra HEX, RGB, HSL, HWB, LAB, LCH e OKLCH e dice qual è il colore con nome più vicino.
Dopo
Questi accettano ciò che produce questo strumento, così il risultato può passare direttamente.
Convertitore di codici colore
Colour Format Converter
Converte un colore tra HEX, RGB, HSL, HWB, LAB, LCH e OKLCH e dice qual è il colore con nome più vicino.
Formattatore e minificatore CSS
CSS Beautifier & Minifier
Formatta o minifica il CSS senza riordinare niente, conservando esattamente il flusso dei token.
Generatore di tavolozze
Palette Generator
Costruisce una tavolozza armonica a partire da un colore di base, con le regole del complementare, della triade e degli analoghi.
Generatore di sfondi a motivo
Background Pattern Generator
Genera motivi SVG ripetibili senza giunte — righe, pois, griglie, grana — con controlli di colore e di scala.
Selettore di colore
Colour Picker
Sceglie un colore su un campo OKLCH, con il contagocce sullo schermo o da un’immagine caricata, e lo copia nella notazione che vuoi.
Verifica del contrasto
Contrast Checker
Dà un punteggio alla coppia testo/sfondo secondo WCAG 2 e APCA e propone il colore più vicino che passa.