Generatore di gradienti CSS online gratuito

Il gradiente CSS è diventato il modo più leggero e flessibile per abbellire uno sfondo, un pulsante o una card. Niente più esportare un PNG da un editor di immagini: il browser calcola la transizione tra i tuoi colori, in vettoriale, con poche decine di byte. generatore di gradienti CSS di Volade produce il codice esatto — angolo, stop, posizione di origine — mentre componi sullo schermo.

linear-gradient: il gradiente direzionale

La funzione linear-gradient() riceve un angolo seguito dagli stop: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%). L'angolo 0deg punta verso l'alto, 90deg verso destra, 180deg verso il basso. Senza angolo, il browser parte dall'alto verso il basso. È la sintassi più usata per gli header, i pulsanti call-to-action e le fasce di sezione.

radial-gradient: l'alone e l'ellisse

La funzione radial-gradient() parte da un punto (per impostazione predefinita il centro) e si espande in cerchio o ellisse. La posizione di origine si scrive at X% Y%: radial-gradient(circle at 50% 50%, …). Perfetto per un effetto alone dietro un titolo, uno sfondo hero che punta al centro o un'ombra morbida sintetica. Lo strumento espone due cursori X e Y per posizionare l'origine al pixel.

conic-gradient: la rotazione attorno a un punto

La funzione conic-gradient() ruota attorno a un punto, come le lancette di un orologio. Si scrive conic-gradient(from 90deg at 50% 50%, …) e permette di creare anelli, gauge circolari, bordi colorati o effetti prisma. Ogni stop occupa un settore angolare: posizionando più colori disegni un ciambella CSS senza una sola immagine.

Gli stop di colore (color stops)

Ogni stop associa un colore e una posizione in percentuale: #7a2fe2 0%, #a358ee 55%, #f3e8ff 100%. Posizioni identiche su due colori creano una transizione netta (bordo duro); posizioni distanti producono una dissolvenza graduale. Più di due stop permettono palette multicolore, bande o simulazioni di materiali (metallo, madreperla, aurora boreale).

Sovrapporre un gradiente e prevedere un fallback

Nella scorciatoia background, l'ordine conta: il piano superiore prima. Un velo scuro su una foto si scrive background: linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,0)), url(photo.webp);. Metti sempre un colore unito come fallback (background-color) per i browser molto vecchi o durante il caricamento dell'immagine.

Buone pratiche per le performance

Un gradiente CSS viene ricalcolato a ogni ridimensionamento: resta ragionevole sul numero di stop (2 o 5 bastano nel 90% dei casi) e evita sovrapposizioni multiple su superfici molto grandi su mobile. Preferisci valori esadecimali o HSL stabili e congela l'angolo non appena il design è validato per evitare micro-differenze tra browser.

Gradienti con la palette Volade

Per costruire una palette coerente prima di creare i gradienti, usa il generatore di palette e il selettore di colore : individua le tinte del brand, poi incollale qui come stop. Il risultato si copia direttamente nel tuo CSS, design system o tema — su computer come su mobile, senza account e senza invio di dati.