UTILITY • STRUMENTO GRATUITO
Generatore Gradiente CSS — Linear, Radial e Conic
Crea gradienti CSS in modo visuale: scegli colori, tipo (linear, radial, conic) e angolo. Copia il codice CSS pronto all'uso. Strumento gratuito per web designer.
Generatore Gradiente CSS
Strumento gratuito offerto da Be Creative Studio
Come creare un gradiente CSS online
Il generatore gradiente CSS ti permette di creare codice CSS per gradienti in modo visuale, senza scrivere manualmente le proprietà. Scegli il tipo di gradiente (lineare, radiale o conico), seleziona i colori delle fermate, regola le posizioni e l’angolo: il codice CSS viene generato in tempo reale e puoi copiarlo con un clic per incollarlo nel tuo CSS o nel tuo editor.
I gradienti CSS sono una delle funzionalità più potenti del CSS moderno: permettono di creare sfondi sfumati, pulsanti, header e divisori senza usare immagini, riducendo i tempi di caricamento della pagina e migliorando la flessibilità del design. Supportati da tutti i browser moderni, i gradienti CSS possono essere animati, combinati con altri sfondi e usati su qualsiasi elemento HTML.
Tipi di gradiente CSS disponibili
- Lineare (linear-gradient): la sfumatura si sviluppa lungo una linea retta con angolo regolabile da 0° a 360°
- Radiale (radial-gradient): la sfumatura si irradia dal centro verso l’esterno, creando effetti circolari
- Conico (conic-gradient): la sfumatura ruota attorno a un punto centrale, perfetta per grafici a torta e design circolari
Come aggiungere colori al gradiente
Ogni gradiente è composto da fermate di colore (color stops): punti in cui il colore cambia. Puoi aggiungere fino a 5 fermate di colore usando il pulsante «+ Aggiungi colore». Per ciascuna fermata puoi scegliere il colore con il selettore e specificare la posizione in percentuale (0% è l’inizio, 100% è la fine). Puoi anche rimuovere una fermata cliccando la X, tenendo sempre almeno 2 colori.
Generatore gradiente CSS: crea sfondi sfumati per il tuo sito
Il generatore gradiente CSS è uno degli strumenti più utili per i web designer: permette di creare sfondi sfumati professionali senza dover memorizzare la sintassi CSS. Con il nostro strumento puoi visualizzare in anteprima il risultato in tempo reale e copiare il codice CSS pronto all’uso. Il codice generato è compatibile con tutti i browser moderni (Chrome, Firefox, Safari, Edge) e non richiede prefissi vendor.
Il gradiente CSS lineare è il tipo più usato: linear-gradient(135deg, #3b82f6, #8b5cf6) crea una sfumatura diagonale dal blu al viola. Cambiando i gradi cambia la direzione: 0deg va dal basso verso l’alto, 90deg da sinistra a destra, 180deg dall’alto verso il basso. Puoi aggiungere più fermate di colore per creare effetti multicolore: linear-gradient(90deg, #ff6b6b, #ffd93d, #6bcb77) crea una sfumatura tricolore.
Strumenti correlati: colori HTML e CSS per trovare i codici dei colori, convertitore colori per convertire tra HEX, RGB, HSL, selettore colore da immagine. Per la documentazione sui gradienti CSS: MDN Web Docs — Gradienti CSS.
Domande Frequenti
I gradienti CSS funzionano su tutti i browser?
Sì, linear-gradient, radial-gradient e conic-gradient sono supportati da tutti i browser moderni: Chrome, Firefox, Safari, Edge e Opera. Il supporto per conic-gradient è più recente e non è disponibile su IE11. Per la compatibilità con browser molto datati si possono aggiungere prefissi vendor come -webkit-, ma nella pratica moderna non sono necessari.
Come si applica un gradiente CSS allo sfondo di un elemento?
Usa la proprietà background o background-image: background: linear-gradient(135deg, #3b82f6, #8b5cf6);. Il gradiente funziona come un’immagine di sfondo, quindi puoi combinarlo con background-size, background-position e sovrapporre più gradienti separandoli con la virgola. Esempio: background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), url(img.jpg); crea un overlay scuro su un’immagine.
Posso usare la trasparenza nei gradienti CSS?
Sì, puoi usare colori in formato RGBA o HSLA per includere la trasparenza nelle fermate di colore. Ad esempio linear-gradient(rgba(59,130,246,1), rgba(59,130,246,0)) crea una sfumatura da blu opaco a blu trasparente. Questo è utile per creare overlay su immagini, effetti di dissolvenza e separatori trasparenti. La parola chiave transparent equivale a rgba(0,0,0,0).
Come si crea un effetto striato o a righe con i gradienti CSS?
Puoi creare righe usando due fermate di colore con la stessa posizione. Esempio: linear-gradient(90deg, #3b82f6 50%, #fff 50%) crea metà sfondo blu e metà bianco senza sfumatura. Ripetendo il pattern con repeating-linear-gradient puoi creare righe uniformi: repeating-linear-gradient(45deg, #3b82f6, #3b82f6 10px, #fff 10px, #fff 20px).
Tutti gli Strumenti Sono Gratuiti
Nessuna registrazione. Usa subito tutti i 76+ strumenti.
← Tutti gli strumenti