Generatore di gradienti CSS
Modella un gradiente in modo visivo, poi copia un CSS che funziona in tutti i browser moderni.
Sigillato su questo dispositivo
Funziona nel tuo browser. Non viene caricato nulla.
Sigillato
Anteprima
Punti colore
Trascina i punti, oppure selezionane uno e usa i tasti freccia. Fai clic sulla barra per aggiungere un punto.
Impostazioni
OKLCH e OKLab evitano la zona grigia e spenta al centro di alcuni gradienti. Per i browser meno recenti è inclusa una versione standard.
Codice CSS
Come funziona
-
Scegli un tipo
Scegli un gradiente lineare, radiale o conico, oppure parti da un preset, e imposta l’angolo o il centro.
-
Modifica i colori
Trascina i punti colore lungo la barra, fai clic sulla barra per aggiungerne altri e cambia colore e posizione di ogni punto.
-
Copia il CSS
Copia il codice generato e incollalo nel tuo foglio di stile come sfondo.
Domande frequenti
Che differenza c’è tra gradienti lineari, radiali e conici?
Un gradiente lineare cambia colore lungo una linea retta, con l’angolo che scegli. Un gradiente radiale si espande da un punto centrale a forma di cerchio o di ellisse. Un gradiente conico ruota attorno a un punto centrale, come le lancette di un orologio: è comodo per ruote dei colori e grafici a torta.
Il CSS generato funziona in tutti i browser?
I gradienti lineari, radiali e conici funzionano in tutti i browser attuali. Quando scegli la fusione OKLCH o OKLab, il codice include prima anche una riga standard, così i browser meno recenti mostrano comunque un gradiente.
Perché il mio gradiente è grigio al centro?
Fondere due colori molto diversi nello spazio standard sRGB passa spesso per un grigio spento. Passa alla fusione OKLCH o OKLab: i colori vengono mescolati come li percepisce l’occhio, così il centro resta luminoso.
Posso usare colori trasparenti?
Sì. Scrivi un colore con trasparenza, come rgb(52 66 217 / 0.4) o #3442d966, nel campo colore di un punto. È perfetto per le sovrapposizioni sulle immagini.
Quanti punti colore posso aggiungere?
Tutti quelli che ti servono. Ogni punto si sposta con il mouse, con il tocco o con i tasti freccia, e si può rimuovere finché ne restano almeno due.