Skip to content
Strumento gratuitoDesign

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 gratuitamente

Caratteristiche

1

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.

2

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.

3

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.

4

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.

Come usare

1

Scegli il tipo di sfumatura

Selezionare lineare, radiale o conica. Per lineare, imposta l'angolo; per radiale, imposta il punto centrale e la forma.

2

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.

3

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.

Specifiche

Tipi di gradienteLineare, radiale, conica
Il colore si fermaIllimitato
Intervallo angolare0–360°
Uscita CSSPrefissi standard + fornitore
Esportazione PNGFino a 4000×4000px
ElaborazioneLato 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 gratuitamente

More free tools

Explore our other limited free edits after sign-in photo and image tools.