Strumento online gratuito per generare sfumature CSS. Lineari e radiali, regola direzione, colori, punti di arresto. Copia codice. Elaborato nel browser.
Premi Ctrl+D per aggiungere questa pagina ai preferiti
Generatore di gradienti CSS online gratuito. Progetta visivamente gradienti lineari, radiali e conici, poi copia il codice CSS all'istante.
Come usare Generatore sfumature?
Seleziona il tipo di gradiente (lineare, radiale, ecc.).
Aggiungi i punti di colore e impostane i colori.
Copia il codice CSS generato.
Domande frequenti su Generatore sfumature
Quali tipi di gradiente sono supportati?
Sono supportati gradienti lineari, radiali e conici.
Posso copiare direttamente il codice CSS?
Sì, copia con un clic il codice del gradiente CSS generato per applicarlo direttamente al tuo sito web.
Perché nel mezzo del mio gradiente compare una fascia grigiastra?
Quando due colori sono opposti sulla ruota, la miscela attraversa un punto in cui la saturazione scende quasi a zero, e questo si vede come una fascia grigia spenta. Le coppie blu-arancione e rosso-verde sono le solite responsabili. Aggiungere un terzo colore come tappa intermedia fa girare il gradiente attorno al grigio, e scegliere due tinte vicine sulla ruota elimina il problema in partenza.
Posso salvare il gradiente come file immagine e non solo come CSS?
Sì, puoi scaricare un PNG e usarlo subito come sfondo di una slide, immagine per i social o impaginato di stampa. Per una pagina web, però, il CSS è preferibile: non c'è alcun file da scaricare, il gradiente si adatta a qualsiasi dimensione di schermo senza rompersi e non mostra mai la scalettatura di un bitmap ingrandito.
Consigli per usare Generatore sfumature efficacemente
Mescola due tinte vicine sulla ruota dei colori: quelle opposte danno un grigio sporco al centro.
La diagonale a 135 gradi è la scelta più sicura per banner e sfondi di card.
Se ci andrà del testo sopra, verifica il contrasto sullo stop più chiaro del gradiente.