Generatore di Gradienti CSS
Crea gradienti CSS e gradienti mesh visivamente. Controlla i punti colore, le curve di easing, gli angoli e molto altro - poi copia il CSS pronto per la produzione con un clic.
Tipo di Gradiente
Direzione
Interpolazione
L'easing morbido tra i punti evita tonalità intermedie torbide.
Punti Colore
Preset
Anteprima
Output CSS
Punti Colore
Impostazioni
Azioni
Tavolozze
Canvas (trascina i punti per riposizionarli)
Output CSS
Come Usare il Generatore di Gradienti
Scegli il Tuo Tipo
Scegli Gradiente CSS per stili lineari, radiali o conici, oppure Gradiente Mesh per sfondi organici e fluenti.
Personalizza
Trascina i punti colore, regola l'angolo e le curve di easing. Per i gradienti mesh, trascina i punti colore direttamente sulla tela.
Esporta
Copia il CSS con un clic, oppure scarica il gradiente mesh come PNG ad alta risoluzione da utilizzare come immagine.
Riferimento Gradiente CSS
linear-gradient()
background: linear-gradient(angle, stop1, stop2…);
Transizione tra colori lungo una linea retta con un dato angolo. Usa to right, to bottom o un valore in gradi come 135deg.
radial-gradient()
background: radial-gradient(shape size at pos, stop1, stop2…);
Si irradia da un punto centrale verso l'esterno. La forma può essere circle o ellipse. Le parole chiave di dimensione controllano dove finisce il gradiente.
conic-gradient()
background: conic-gradient(from angle at pos, stop1, stop2…);
Ruota il colore attorno a un punto centrale come una ruota cromatica. Ottimo per grafici a torta ed effetti starburst.
Interpolazione con Easing
/* Più punti simulano una curva */
Di default CSS interpola nello spazio sRGB, creando tonalità intermedie torbide. L'easing aggiunge punti intermedi per simulare curve morbide come ease-in-out.
Domande Frequenti
Cos'è un gradiente mesh?
Un gradiente mesh è un tipo di gradiente in cui più punti colore sono posizionati in diverse posizioni, fondendosi dolcemente l'uno con l'altro. A differenza dei gradienti lineari o radiali, creano sfondi organici e fluenti con profondità - popolari nel design UI moderno.
Perché il mio gradiente sembra torbido nel mezzo?
I gradienti CSS interpolano i colori nello spazio sRGB di default, il che può produrre tonalità intermedie grigie o marroni tra alcuni colori (specialmente quelli complementari). Attiva Interpolazione con Easing per aggiungere punti intermedi che risolvono questo problema.
Come utilizzo il gradiente mesh scaricato?
Scarica il PNG e usalo come background-image in CSS: background-image: url('mesh.png'); insieme a background-size: cover. In alternativa, copia l'output CSS che utilizza uno sfondo con data-URI SVG.
Posso usare questi gradienti in Tailwind CSS?
Sì - per i gradienti CSS, copia il valore e aggiungilo a theme.extend.backgroundImage nella tua configurazione. Per i gradienti mesh, usa il PNG come asset statico o aggiungi il CSS SVG come valore arbitrario.
Qual è il supporto browser per conic-gradient?
conic-gradient è supportato in tutti i browser moderni (Chrome 69+, Firefox 83+, Safari 12.1+, Edge 79+). Per browser meno recenti, fornisci un colore solido o un gradiente lineare di fallback.
Quanti punti colore posso aggiungere?
Non c'è un limite rigido - puoi aggiungere tutti i punti che il tuo design richiede. I browser supportano un numero illimitato di punti nelle funzioni gradiente CSS.