Generatore di gradienti CSS
Progetta un gradiente di sfondo in modo visuale e copia CSS pronto all'uso. Trascina i punti colore lungo la barra, clicca sulla barra per aggiungerne uno, cambia l'angolo o il centro e rendi trasparenti i colori. Il codice include un colore pieno di riserva per i browser vecchi.
Come si usa
- Scegli lineare, radiale o conico, oppure parti da un preset o da un gradiente casuale.
- Clicca su un punto per modificarne colore, opacità e posizione; trascinalo, oppure clicca sulla barra per aggiungerne un altro.
- Copia il CSS e incollalo nella regola dell'elemento.
Domande frequenti
Qual è la differenza 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 centro in forma di cerchio o ellisse. Un gradiente conico ruota attorno a un centro, come le lancette di un orologio, ed è utile per le ruote dei colori e i grafici a torta.
I gradienti CSS funzionano in tutti i browser?
Sì. I gradienti lineari, radiali e conici funzionano in tutte le versioni attuali di Chrome, Edge, Firefox e Safari, senza prefissi. La prima riga di background è un colore semplice, usato solo dai browser molto vecchi.
Come faccio le strisce?
Metti due punti dello stesso colore all'inizio e alla fine di ogni striscia, così il colore cambia di colpo invece di sfumare, e attiva Ripeti. L'ultimo preset ne è un esempio.
🏷️ Generatore di meta tag
🖼️ Generatore Open Graph
🔗 Generatore di link UTM
🔲 Generatore di box-shadow CSS