Generatore di Sfumature CSS
Aggiungi colori, scegli lineare o radiale, e copia il CSS finito. L'anteprima si aggiorna mentre digiti — niente lascia mai il tuo browser.
Progetta la sfumatura, ottieni CSS vero
Ogni colore ha una posizione — da 0% a 100% lungo la sfumatura. Questo strumento ordina
sempre i colori per posizione quando genera il CSS
(indipendentemente dall'ordine in cui li hai aggiunti), così
quello che vedi nell'anteprima corrisponde sempre a quello che
copi. Passa da Lineare, con qualsiasi angolo da
0° a 360°, a Radiale per una sfumatura che si
espande dal centro invece di seguire una linea.
Esempio pratico
Due colori — #667eea a 0% e #764ba2 a 100% — con tipo lineare a 135deg produce:
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
Incollalo direttamente in un file CSS o in un attributo style. Aggiungi un terzo colore al 50%
e il CSS — e l'anteprima — si aggiornano automaticamente a una
miscela di tre colori.
Domande frequenti
Qual è la differenza tra una sfumatura lineare e una radiale?
Una sfumatura lineare passa da un colore all'altro lungo una linea retta, con l'angolo che scegli — come un tramonto che passa dall'arancione al viola nel cielo. Una radiale si espande in cerchi da un punto centrale invece che lungo una linea, come un faretto o un bagliore. Entrambe usano gli stessi colori; cambia solo la forma della transizione.
Come funziona l'angolo in una sfumatura lineare?
In CSS, 0deg punta verso l'alto del riquadro e l'angolo aumenta in senso orario — quindi 90deg punta a destra, 180deg verso il basso e 270deg a sinistra. Confonde molti perché 0deg non è 'da sinistra a destra' come ci si aspetterebbe, ma 'verso l'alto'. Il cursore dell'angolo qui aggiorna l'anteprima all'istante, così non devi tenerlo a mente.
Perché la posizione di ogni colore è importante?
La posizione (0–100%) indica il punto lungo la linea o il raggio in cui quel colore viene raggiunto pienamente — CSS sfuma in modo graduale tra i colori adiacenti. Avvicinare due colori (per esempio 40% e 45%) crea una banda di colore netta invece di una transizione morbida, il che è un effetto valido e non un errore, se è quello che stai cercando.
Servono i prefissi dei browser perché questo CSS funzioni?
No — linear-gradient() e radial-gradient() sono supportati senza prefissi da anni in tutti i browser moderni. Il CSS generato da questo strumento è pronto da copiare e incollare, senza bisogno di -webkit- o -moz-.