Progetta bellissimi gradienti ed esporta come CSS o immagini
Scegli i colori, aggiungi interruzioni e regola l'angolo o il punto centrale per creare l'esatto gradiente di cui hai bisogno. Lo strumento supporta gradienti lineari, radiali e conici con interruzioni di colore illimitate. Copia il codice CSS per il tuo foglio di stile o scarica il gradiente come PNG ad alta risoluzione da utilizzare nei progetti di design.
Utilizza questo strumento gratuitamenteBrowser tool
Gradient generator
Create CSS gradients, preview them live, and export a PNG locally in your browser.
background-image: linear-gradient(90deg, rgba(255, 56, 56, 1) 0%, rgba(124, 58, 237, 1) 100%);Starter palettes
Come usare
Scegli il tipo di sfumatura
Selezionare lineare, radiale o conica. Per lineare, imposta l'angolo; per radiale, imposta il punto centrale e la forma.
Aggiungi e regola i colori
Fai clic sulla barra della sfumatura per aggiungere interruzioni di colore. Trascina per riposizionare, fai doppio clic per cambiare il colore e regola l'opacità per ogni punto.
Copia CSS o scarica
Copia il codice CSS generato per l'utilizzo sul Web oppure imposta una risoluzione e scarica il gradiente come immagine PNG.
Caratteristiche
Tre tipi di gradiente
Crea gradienti lineari con qualsiasi angolo, gradienti radiali con centro e forma regolabili o gradienti conici che si estendono attorno a un punto. Passa da un tipo all'altro e gli aggiornamenti di anteprima sono istantanei.
Interruzioni di colore illimitate
Aggiungi tutte le interruzioni di colore di cui hai bisogno lungo la barra della sfumatura. Trascina le fermate per riposizionarle, fai doppio clic per cambiare il colore o fai clic con il pulsante destro del mouse per eliminarle. Ogni interruzione supporta l'opacità per le sfumature semitrasparenti.
Uscita del codice CSS
Lo strumento genera un codice immagine di sfondo CSS valido con i prefissi del fornitore. Copia il codice e incollalo direttamente nel tuo foglio di stile. L'output si aggiorna in tempo reale mentre modifichi il gradiente.
Esportazione di immagini PNG
Scarica il gradiente come PNG a qualsiasi risoluzione: dalle miniature da 100 px ai banner da 4000 px. Utilizza l'immagine come sfondo, sovrapposizione o elemento di progettazione in strumenti che non supportano i gradienti CSS.
After this task
After this free tool, open Ai Enhance for the next AI editing workflow.
Continue with Ai EnhanceSpecifiche
| Tipi di gradiente | Lineare, radiale, conica |
| Il colore si ferma | Illimitato |
| Intervallo angolare | 0–360° |
| Uscita CSS | Prefissi standard + fornitore |
| Esportazione PNG | Fino a 4000×4000px |
| Elaborazione | Lato client (istantaneo) |
Related Magic Eraser Tools
Domande comuni
Posso creare un gradiente con trasparenza?
+
SÌ. Ogni interruzione di colore ha un cursore di opacità. Imposta l'opacità al di sotto del 100% per creare aree semitrasparenti nel gradiente. L'output CSS utilizza valori rgba e l'esportazione PNG preserva il canale alfa.
Cos'è un gradiente conico?
+
Una sfumatura conica irradia interruzioni di colore attorno a un punto centrale, come il movimento della lancetta di un orologio. È utile per effetti in stile grafico a torta, ruote dei colori e sfondi decorativi. Il supporto del browser è eccellente nei browser moderni.
Posso utilizzare il CSS generato in qualsiasi framework?
+
SÌ. L'output è un CSS standard che funziona in HTML semplice, React, Vue, Tailwind e qualsiasi altro framework che supporti CSS in linea o basati su fogli di stile.
Hai bisogno di una sfumatura su una foto?
AI Enhance può regolare la tonalità di colore e l'illuminazione delle tue foto, mentre il nostro strumento di sovrapposizione immagini ti consente di fondere una sfumatura sopra qualsiasi immagine per un aspetto raffinato.
Provalo gratuitamenteMore free tools
Explore our other limited free edits after sign-in photo and image tools.
Converti colori tra formati con nome HEX, RGB, HSL, HSB, CMYK e CSS. Visualizza un'anteprima dal vivo, copia qualsiasi valore ed esporta una cartella colori. Non è necessaria alcuna registrazione.
Converti codici colore HEX in valori RGB e viceversa. Anteprima dal vivo, copia con un clic e output di snippet CSS. Non è necessaria alcuna registrazione: funziona nel tuo browser.
Scegli qualsiasi colore da un'immagine caricata e ottieni immediatamente i suoi codici HEX, RGB e HSL. Crea tavolozze da foto per il web design, il branding e l'illustrazione.
Carica una foto ed estrai 5-10 colori dominanti con codici HEX, RGB e HSL. Copia campioni, esporta come variabili ASE o CSS. Non è necessaria alcuna registrazione.
Genera codici QR per URL, testo, credenziali WiFi e vCard. Personalizza i colori, aggiungi un logo centrale e scarica come PNG o SVG. Non è necessaria alcuna registrazione.
Calcola larghezza, altezza o proporzioni per immagini e video. Inserisci due valori qualsiasi e ottieni il terzo. Rapporti preimpostati per social media, film e stampa. Non è necessaria alcuna registrazione.