Generatore gradienti CSS: a cosa serve
Scrivere un gradiente a mano significa modificare il CSS, salvare e ricaricare finché l'angolazione non sembra giusta. Questo generatore offre un'anteprima dal vivo: scegli tipo, angolo e stop di colore, osserva il risultato e copia un CSS pronto per la produzione, senza prefissi vendor necessari su nessun browser attuale.
Generatore gradienti CSS: come si usa
- Scegli un gradiente lineare o radiale.
- Imposta l'angolo, o la forma se è radiale.
- Aggiungi stop di colore e trascina la loro posizione.
- Copia il CSS generato direttamente nel tuo foglio di stile.
Domande frequenti
Come funzionano gli angoli dei gradienti in CSS?
0deg punta verso l'alto e gli angoli aumentano in senso orario, quindi 90deg va da sinistra a destra e 180deg dall'alto verso il basso. È diverso dalla convenzione matematica, e questo spesso trae in inganno.
Perché il mio gradiente appare spento al centro?
Perché interpolare in sRGB passa per un punto intermedio desaturato, in modo particolarmente evidente tra colori complementari. Aggiungere uno stop intermedio, oppure usare l'interpolazione in oklch dei browser moderni, risolve il problema.
Servono ancora i prefissi vendor?
No. linear-gradient e radial-gradient senza prefisso sono supportati da anni da tutti i browser attuali. I prefissi aggiungono solo peso al file.
Un gradiente si può animare?
Non direttamente con una semplice transizione, perché background-image non si interpola. Il trucco più usato è animare background-position su un gradiente sovradimensionato, oppure usare proprietà custom registrate con @property.