Generatore di gradienti CSS

Come funzionano i gradienti CSS

Un gradiente CSS è un’immagine generata dal browser che passa gradualmente da un colore all’altro. Non pesa nulla da scaricare, si adatta a qualsiasi dimensione senza perdere qualità e si modifica cambiando una riga di codice. Per questo è ideale per sfondi, pulsanti, hero section e sovrapposizioni sulle foto.

Il generatore supporta i tre tipi di gradiente. Il lineare (linear-gradient) segue una direzione o un angolo. Il radiale (radial-gradient) parte da un punto e si espande come cerchio o ellisse, con la posizione del centro a tua scelta. Il conico (conic-gradient) ruota attorno a un centro, utile per grafici a torta e ruote di colore.

Puoi aggiungere quanti punti di colore vuoi, ognuno con il suo colore, la sua opacità e la sua posizione in percentuale. Con l’opacità crei sfumature verso il trasparente, perfette da sovrapporre a un’immagine per rendere leggibile il testo. Se vuoi partire da qualcosa di pronto, ci sono gradienti predefiniti da modificare.

Un consiglio pratico: i gradienti tra due colori molto diversi possono passare per una zona centrale spenta o grigiastra. Aggiungere un punto di colore intermedio, più saturo, rende la transizione più viva. Anche l’angolo conta: piccole inclinazioni come 135deg risultano spesso più naturali di un gradiente perfettamente orizzontale.

Ogni modifica si vede subito nell’anteprima e il codice viene generato come proprietà background, pronto da copiare. Tutto avviene nel tuo browser e il generatore è gratuito, senza limiti: crea e copia tutti i gradienti che vuoi.

Come creare un gradiente CSS

1. 1Scegli il tipo: lineare, radiale o conico, oppure parti da un preset.
2. 2Imposta l’angolo o la direzione; per il radiale scegli forma (cerchio o ellisse) e posizione.
3. 3Aggiungi o modifica i punti di colore con colore, opacità e posizione %.
4. 4Controlla il risultato nell’anteprima dal vivo.
5. 5Copia il CSS e incollalo nel tuo foglio di stile.

Dove usare un gradiente CSS

• Sfondi di hero section e landing page.
• Pulsanti e call to action con un po’ di profondità.
• Sovrapposizioni scure o colorate sulle foto per rendere leggibile il testo.
• Bordi e testi sfumati combinando il gradiente con altre proprietà.
• Grafici a torta e ruote di colore con conic-gradient.
• Placeholder leggeri al posto delle immagini.

Angoli e direzioni nei gradienti lineari

• 0deg va dal basso verso l’alto, 90deg da sinistra a destra, 180deg (il default) dall’alto verso il basso.
• to right equivale a 90deg; to bottom right punta esattamente verso l’angolo, qualunque sia la proporzione del box.
• Due punti di colore con la stessa posizione creano un passaggio netto, senza sfumatura: utile per strisce.
• Usa colori con trasparenza invece della parola transparent per evitare passaggi grigiastri nei browser più vecchi.

Domande Frequenti