Generatore di Gradienti CSS

Sui gradienti CSS

Un gradiente CSS è un'interpolazione fluida tra due o più colori dipinta direttamente dal browser — senza bisogno di un'immagine. I gradienti lineari scorrono lungo una retta all'angolo che scegli; i gradienti radiali si irradiano da un centro verso l'esterno. Ogni color stop ha una posizione dallo 0% al 100% lungo la linea del gradiente. I browser fondono tutto in sRGB per impostazione predefinita, quindi più contrasto c'è tra stop adiacenti, più visibile sarà la fascia di toni misti tra di essi.

Come usare questo generatore

Scegli un tipo di gradiente, poi per quello lineare regola l'angolo (0° punta verso l'alto, 90° verso destra, 180° verso il basso). Ogni riga in Color stop ha un selettore colore e una posizione — trascina lo slider, digita una percentuale, o clicca Aggiungi stop per inserire un nuovo colore. Applica un Preset se vuoi solo una rapida palette di partenza. Il riquadro CSS sotto l'anteprima mostra l'esatta dichiarazione background; clicca Copia e incollala nel tuo foglio di stile.

Consigli di design

I gradienti a due stop tra colori analoghi (vicini sulla ruota dei colori) appaiono calmi e moderni. I gradienti a tre stop con un accento al centro possono sembrare ricchi ma diventano facilmente fangosi — mantieni la saturazione simile tra gli stop. Per sfondi UI scuri, abbina un quasi-nero a una tonalità scura con contrasto molto basso (5–10% di differenza di luminosità) così il gradiente si percepisce più che vedere. Testa sempre il tuo gradiente con il contenuto reale sopra — il testo richiede almeno 4,5:1 di contrasto rispetto a qualsiasi area del gradiente che si sovrappone.

Domande frequenti

Quanti color stop posso aggiungere?

Questo strumento è limitato a cinque stop, che coprono praticamente ogni gradiente UI che spedirai mai. CSS in sé non impone un limite, ma oltre i 4–5 stop di solito perdi più in fanghiglia di quanto guadagni in dettaglio. Se hai bisogno di transizioni fotografiche, considera una mesh SVG o una vera immagine.

Perché il mio gradiente lineare appare diverso da quello di un altro strumento?

Strumenti diversi a volte interpretano l'angolo in modo diverso — la specifica CSS usa 0° come alto, 90° come destra, ma la vecchia sintassi Webkit usava un riferimento diverso. L'output qui usa la forma moderna linear-gradient(deg, ...), che funziona in ogni browser attuale senza prefissi.

Posso usarlo per la dark mode?

Sì — abbina il gradiente a @media (prefers-color-scheme: dark) nel tuo CSS e scegli un set di stop più scuri. Puoi anche avvolgere la dichiarazione del gradiente in variabili CSS e cambiare i valori per tema, mantenendo intatto il resto del tuo CSS.

I gradienti penalizzano le performance?

Su hardware moderno, no — sono dipinti sulla GPU come qualsiasi altro sfondo. Dove potresti notare un costo è su enormi gradienti radiali a tutto schermo animati a 60fps, o su dispositivi mobili molto vecchi. Per uno sfondo statico di un pannello, il costo è trascurabile.

Posso animare un gradiente?

CSS non anima direttamente background-image, ma puoi animare background-position su un gradiente sovradimensionato, o usare @property con custom properties per interpolare i colori degli stop. In ogni caso, preferisci fallback per il movimento ridotto per gli utenti che lo richiedono.

I gradienti radiali sono supportati ovunque?

Sì. linear-gradient() e radial-gradient() sono in produzione in ogni browser principale da oltre un decennio. L'output qui usa la forma standard (senza prefissi vendor) e funziona fino ai primi browser evergreen.

Generatore di Gradienti CSS