Generatore di sfumature CSS
Cos'è una sfumatura CSS?
Le sfumature CSS permettono di visualizzare transizioni fluide tra due o più colori senza usare file immagine. Esistono tre tipi: linear-gradient (lungo una linea retta), radial-gradient (irradiante da un punto centrale) e conic-gradient (che ruota attorno a un punto centrale). Le sfumature sono usate per sfondi, pulsanti, sovrapposizioni ed elementi decorativi.
Come usare il generatore di sfumature CSS
-
Scegli un preset dai campioni o configura la tua sfumatura.
-
Scegli il tipo di sfumatura: linear, radial o conic.
-
Regola l'angolo (per linear/conic) o la forma (per radial).
-
Modifica i punti di colore — cambia colori e posizioni (0–100%).
-
Aggiungi o rimuovi punti di colore secondo necessità.
-
Copia il CSS e incollalo nel tuo foglio di stile.
Domande Frequenti
Come faccio a creare una sfumatura trasparente? Usa valori di colore rgba() o hsla() con un canale alfa pari a 0 per trasparenza completa. Ad esempio, un punto colore di rgba(0,0,0,0) è nero completamente trasparente, utile per dissolvenze su immagini.
Come creo un punto colore duro (senza transizione)? Posiziona due punti colore nella stessa posizione: uno che termina e uno che inizia in quel punto. Ad esempio, rosso 50%, blu 50% crea un cambio istantaneo da rosso a blu nel mezzo senza transizione di sfumatura.
Quali browser supportano le sfumature coniche? Le sfumature coniche sono supportate in tutti i browser moderni (Chrome 69+, Firefox 83+, Safari 12.1+, Edge 79+). Non sono supportate in Internet Explorer.
Posso usare più sfumature sullo stesso elemento? Sì. Lo sfondo CSS accetta un elenco di livelli separati da virgole. Puoi impilare sfumature, combinarle con immagini di sfondo e controllare posizione e dimensione di ogni livello in modo indipendente.
Keywords: generatore sfumatura CSS, gradiente lineare, gradiente radiale, gradiente conico, generatore sfondo CSS, selettore colore gradiente, strumento gradiente CSS