Generatore Gradiente CSS Gratis: Creare Sfumature Lineari Radiali

A Seleziona tipo, colori, angolo e copia CSS.

A Lineare e radiale. Multipli colori.

A Sì, aggiungi fermate colore.

A I gradienti lineari scorrono in linea retta, orizzontalmente, verticalmente o diagonalmente. Controlli la direzione con il cursore dell'angolo, ad esempio impostandolo su 90 gradi per uno svanimento verticale. I gradienti radiali si espandono verso l'esterno da un punto centrale, creando un effetto circolare o ellittico. Non puoi controllare direttamente la forma oltre il circolare con questo strumento, ma puoi scegliere dove si trova il centro.

A Lo strumento genera CSS standard compatibile con Chrome, Firefox, Safari ed Edge. Internet Explorer 9 e versioni precedenti non mostrano i gradienti, ma ciò rappresenta meno dell'1% del traffico globale odierno. Per i browser vecchi, aggiungi un colore di sfondo solido come fallback nel tuo CSS prima della proprietà del gradiente. Così gli utenti vedranno un colore piatto se i gradienti non sono supportati. Test rapido: incolla il codice negli strumenti sviluppatore di un browser moderno per verificarlo.

A Le bande si verificano quando la transizione cromatica mostra strisce visibili invece di una fusione morbida. Di solito accade perché il gradiente copre troppi pixel senza abbastanza fermate di colore. Per una sezione hero a tutta larghezza, aggiungi una terza fermata a metà strada tra i due colori principali. Su sfondi grandi (1920px+), prova background-attachment: fixed per ridurre l'effetto banding. Il generatore produce codice pulito, ma il rendering del browser ha limiti. Trucco veloce: usa colori con luminosità simile per transizioni più morbide.

A Il tuo gradiente rispetterà le impostazioni di alto contrasto del sistema, ma lo strumento non le simula. I problemi di contrasto si presentano quando due colori hanno luminosità simile — come giallo pastello accanto a rosa pallido. Controllo rapido: converti entrambi i codici hex in HSL e assicurati che i loro valori L differiscano di almeno 30 punti. Per le sezioni hero, testa il gradiente in modalità alto contrasto di Windows o con un'estensione come Axe. I 12 preset sono stati scelti pensando all'accessibilità, ma i colori personalizzati sono a tuo carico.

A Questa versione non ha una funzione di salvataggio. Una soluzione rapida: incolla il CSS generato in un file di testo, uno snippet di CodePen o nel pannello snippet degli strumenti sviluppatore. I designer che conosco tengono un file "gradients.css" nei loro progetti con 5-10 preferiti pronti all'uso. Ci vogliono 10 secondi per abituarsi, ma ti evita di ricreare tutto ogni volta.