Generatore Gradiente CSS Gratis: Creare Sfumature Lineari Radiali

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.

A Sì, ma il generatore non scrive il codice di animazione per te. L'output è una proprietà background-image statica. Per animarla, devi inserirla in una regola @keyframes che sposti background-position o cambi i colori nel tempo. Un trucco comune: rendi lo sfondo sfumato 3 volte più largo dell'elemento, poi anima background-position da 0 a 100%. Ottieni un'onda cromatica fluida, perfetta per spinner di caricamento o sezioni hero.

A Sposta il cursore dell'angolo a 90 gradi e il gradiente passa da sinistra-destra a sopra-sotto. 180 gradi lo inverte completamente. Per un effetto diagonale, prova 45 o 135 gradi, molto usati nelle sezioni hero. L'anteprima si aggiorna in tempo reale, quindi vedi il cambiamento all'istante. Non serve toccare i color stop a meno che non voglia un bilanciamento diverso.

A No, il generatore produce solo codice CSS. Per i mockup, fai uno screenshot dell'anteprima o copia i valori hex nel tuo tool di design. Figma e Sketch accettano i gradienti CSS nativamente. Se ti serve un'immagine raster, imposta l'angolo a 180 gradi e usa lo screenshot del sistema con zoom al 200%. Ottieni una risorsa nitida in 2x. I colori coincidono esattamente tra browser e software, quindi il mockup resta fedele.

A No, lo strumento genera solo la dichiarazione completa di background-image. Ma puoi accorciarla manualmente: prendi il contenuto tra parentesi dopo linear-gradient e usalo come `background: linear-gradient(...)`. Risparmi circa 30 caratteri per regola. Per bozzetti veloci, molti designer incollano lo snippet intero in un convertitore CSS-to-JSON. Consiglio pratico: tieni la versione completa, è più leggibile e facile da debuggare. La forma breve risparmia byte, quella lunga risparmia mal di testa.