Generatore Gradiente CSS
Generatore di gradienti CSS gratuito: crea gradienti lineari, radiali, conici e mesh con anteprima in tempo reale. Modalità oklch, export Tailwind e 50+...
Aggiornato maggio 2026
Revisionato da Rafael Duarte
⚙ Configurazione
Tipo di sfumatura
Angolo
Interpolazione del colore
background: linear-gradient(135deg, #197FE6 0%, #0EA5E9 100%);
Organize seus animes,
séries e filmes
em um só lugar.
Chega de três apps diferentes. Media tracker 100% em português, com alertas automáticos, feed social e salas de discussão.
+2.400 já na fila de espera
Come usare il generatore di gradienti CSS
Sfumature lineari, radiali, coniche e mesh con anteprima dal vivo
1. Scegli il tipo di gradiente
Lineare, radiale, conico o mesh, oppure parti da uno dei 10 preset o dal pulsante Random.
2. Modifica i punti colore
Trascina i cursori sulla barra, cambia colore e opacità di ogni punto e imposta l'angolo con il campo numerico o la rotella.
3. Copia lo snippet
Scorri i formati disponibili (CSS, oklch, Tailwind v3 e v4 per i lineari) e copia con un clic o con Shift+Invio.
Cosa fa il generatore di sfumature CSS
Quattro tipi di gradiente, dal classico al mesh
Lineare, radiale, conico e mesh
linear-gradient() con angolo libero, radial-gradient() a cerchio o ellisse, conic-gradient() con angolo di partenza e mesh composto da più radiali.
Punti colore illimitati con opacità
Aggiungi tutti i punti che vuoi (minimo due), ciascuno con colore, posizione e opacità propri: sotto il 100% il colore diventa rgba().
Interpolazione oklch
Per i gradienti lineari, radiali e conici puoi passare da sRGB a oklch, che mantiene luminosità e saturazione più uniformi lungo la transizione.
Export Tailwind v3 e v4
Per i gradienti lineari ottieni anche le classi bg-gradient-to-* con from/via/to e la sintassi arbitraria di Tailwind v4.
Preset e preferiti
Dieci combinazioni pronte (Ocean, Sunset, Aurora, Rainbow…) e fino a 20 gradienti personali salvati nel browser.
Export PNG
Scarica il gradiente lineare, radiale, conico o mesh come immagine PNG da 800×600 px, utile per sfondi e copertine.
Esempi di gradienti CSS
Codice generato dai preset
Dove usare un gradiente CSS
Sfondi, pulsanti, testi e grafici
Sfondi di hero section
Un gradiente lineare o mesh dà profondità alla prima schermata senza caricare un'immagine.
Pulsanti e badge
Una sfumatura leggera tra due tinte vicine rende un pulsante più ricco; tieni un background-color pieno come ripiego.
Titoli con testo sfumato
Applica un linear-gradient al testo con background-clip: text e colore del testo trasparente per titoli d'impatto.
Grafici a torta e indicatori
Un conic-gradient con punti colore netti disegna un grafico a torta o un anello di avanzamento in puro CSS.
Cercare ispirazione
Il pulsante Random cambia colori e angolo in un clic: quando trovi una combinazione che ti piace, salvala tra i preferiti.
Errori comuni con i gradienti CSS
Zona grigia tra colori opposti
In sRGB una sfumatura tra blu e giallo passa per un grigio spento a metà. Con l'interpolazione oklch la transizione resta più viva.
Perdere dettagli nell'export Tailwind
Le classi Tailwind v3 conservano opacità e posizioni, ma al massimo tre colori (from, via, to): con più punti quelli intermedi si perdono. Per gradienti complessi usa la v4 o copia il CSS.
Cercare una funzione mesh-gradient()
Il CSS non ha un gradiente mesh nativo: l'effetto si ottiene sovrapponendo più radial-gradient() su un colore di sfondo, ed è esattamente il codice generato.
Aspettarsi i preferiti su ogni dispositivo
I gradienti salvati restano nel localStorage di quel browser: non si sincronizzano e spariscono se cancelli i dati del sito o usi la navigazione privata.
Perché usare questo generatore di gradienti
Lineare, radiale, conico e mesh stanno nello stesso editor, con punti colore illimitati e opacità per ognuno. Per i lineari ottieni anche lo snippet oklch e le classi Tailwind v3 e v4, senza riscrivere nulla a mano.
Vedi il gradiente sia nel riquadro di anteprima sia applicato a una hero di landing page, salvi i preferiti nel browser ed esporti un PNG. Il tutto senza account e senza inviare dati a un server.
Interpolazione sRGB o oklch?
Lo spazio colore cambia il centro della sfumatura
Domande frequenti
Si usa background: linear-gradient(angolo, colore posizione, colore posizione), per esempio linear-gradient(135deg, #197FE6 0%, #0EA5E9 100%). 0deg va dal basso verso l'alto, 90deg da sinistra a destra, 180deg dall'alto verso il basso.
Riferimenti
Guida completa (in inglese) a gradienti lineari, radiali, conici e ripetuti.
Sintassi formale (in inglese), compreso il metodo di interpolazione come `in oklch`.
La specifica (in inglese) che definisce oklch e gli spazi colore usati per interpolare.
Strumenti correlati
- Verificatore Contrasto Colori Design Verificatore contrasto colori gratuito — verifica subito la conformità WCAG 2.2 AA e AAA. Anteprima live, simulazione daltonismo e suggerimenti colori...
- Convertitore di Colori Design Converti colori tra HEX, RGB, HSL e CMYK all'istante. Selettore di colori gratuito con controllo contrasto WCAG e generatore di palette.
- Generatore di Palette Colori Design Genera palette colori armoniose da qualsiasi colore base. Scegli armonia Analoga, Complementare, Triadica o Tetradica — esporta come CSS variables o JSON.
- Palette Colori da Immagine Design Estrai palette colori da qualsiasi immagine — ottieni codici HEX, RGB, HSL ed esporta come CSS variables, Tailwind, JSON o PNG. 100% nel browser, senza upload.
- Generatore CSS Box Shadow — Neumorfismo, Glassmorfismo e Tailwind Design Generatore CSS box shadow gratuito con anteprima in tempo reale. Crea ombre, effetti neumorfismo e glassmorfismo. Esporta in CSS, Tailwind o variabili CSS.
