Generatore gradienti CSS
Crea gradienti CSS lineari, radiali e conici da una palette.
Cosa copre questa pagina
Questa pagina spiega il flusso di lavoro e collega direttamente alla sezione corretta dello strumento principale Chromaforge.
- Genera palette da un colore base.
- Controlla il contrasto prima di pubblicare testo UI.
- Esporta CSS, Tailwind, SCSS, JSON, SVG e PNG.
- Funziona localmente nel browser.
Come funziona il generatore di gradienti CSS
CSS supporta tre tipi principali di gradiente: lineare (linear-gradient), radiale (radial-gradient) e conico (conic-gradient). Ognuno ha caratteristiche visive e casi d'uso diversi.
Lineare: transizione lungo una direzione. Definisci l'angolo (0deg = basso verso alto, 90deg = sinistra verso destra) e almeno due color stop. Puoi aggiungere più stop per gradienti multi-colore. Il caso d'uso più comune è l'header hero o il background di sezione.
Radiale: si irradia da un punto centrale verso l'esterno in forma circolare o ellittica. Perfetto per effetti spotlight, sfondi con profondità visiva, o highlight su elementi interattivi.
Conico: i colori ruotano attorno a un punto centrale come i raggi di una ruota. Meno usato, ma eccellente per grafici a torta CSS, pattern geometrici e effetti holo.
Chromaforge genera il codice CSS esatto con prefissi vendor dove necessario, e permette di scegliere i color stop direttamente dalla palette generata. L'anteprima è in tempo reale: cambia angolo, posizione e colori senza toccare codice.
Esempi pratici
- Hero section: gradiente lineare da colore brand a variante scura, inclinato a 135deg — classico ma sempre efficace per landing page.
- Card con highlight: gradiente radiale sottile sul bordo superiore simula una luce interna sulle card dark mode.
- Bottone glossy: gradiente lineare verticale da bianco semitrasparente (10%) a trasparente sul colore pieno del bottone — effetto materiale con una riga di CSS.
- Sfondo mesh/noise: più gradienti radiali sovrapposti con
backgroundmultipli creano l'effetto "mesh gradient" molto popolare nel 2024-25.
FAQ — Gradienti CSS
Perché il mio gradiente sembra "grigio sporco" nel mezzo?
È il problema del "muddy gradient": quando interpoli due colori in spazio RGB tra hue distanti (es. blu e giallo), il punto medio passa per toni neutri poco attraenti. La soluzione è aggiungere uno stop intermedio con un hue più vivace, oppure usare l'interpolazione in spazio OKLCH (in oklch) disponibile nei browser moderni. Chromaforge mostra l'anteprima con interpolazione OKLCH opzionale.
Posso usare transparent come color stop?
Sì, ma attenzione: transparent in CSS è rgba(0,0,0,0), cioè nero trasparente. Se ci dissolvenza verso trasparente da un colore vivace, il bordo sembrerà scurirsi. Usa invece la versione con alpha del tuo colore base: rgba(37, 99, 235, 0).
Come creo un gradiente che si ripete (repeating)?
CSS ha repeating-linear-gradient e repeating-radial-gradient. Devi specificare la dimensione del pattern con stop espliciti. Esempio: repeating-linear-gradient(45deg, #333 0px, #333 10px, #555 10px, #555 20px) crea strisce diagonali.
I gradienti CSS funzionano come sfondi di testo?
Sì, con la tecnica background-clip: text; -webkit-background-clip: text; color: transparent. Il testo mostra il gradiente come riempimento. Funziona bene per titoli display, da evitare per testo corpo perché può ridurre la leggibilità.
Come esporto il gradiente per Figma?
Figma non importa CSS direttamente, ma puoi inserire manualmente i color stop e l'angolo nel pannello Fill di Figma. Per gradienti complessi, il plugin "CSS to Figma" o "Figma Tokens" automatizzano il processo.