Generatore online di sfondi sfumati

Anteprima in tempo reale degli effetti gradiente CSS, supporta gradienti lineari, radiali e conici, genera codice ed esporta immagini con un clic.

Segnala bug

Modalità di esecuzione nel browser: I tuoi dati vengono elaborati nel browser e non caricati sul server.

Velocità e stabilità: La velocità di elaborazione dipende dal dispositivo e dal browser. Per grandi batch, la versione desktop può essere più stabile.

Caricamento strumento, attendi...

Se lo strumento online non si carica o non funziona, prova lo strumento desktop. https://tools.yikeaigc.com/

Uso dello strumento

Torna alla vecchia versione

Imposta prima il gradiente, poi copia il codice o esporta l'immagine. Supporta gradienti lineari, radiali, conici, ripetuti e stop multicolore; le modifiche si sincronizzano con l'anteprima a destra.

Imposta gradiente

Scegli prima il tipo di gradiente, poi regola direzione e stop colore. Mantieni gli stop in ordine crescente.

Tipo di gradienteIl gradiente conico è ideale per ruote colore e sfondi ad anello

Direzione e formaIl gradiente lineare può usare angoli o direzioni rapide

Angolo lineare90°

Periodo di ripetizione32%

Forma radiale

Estensione

Periodo di ripetizione32%

Centro X50%

Centro Y50%

Angolo iniziale0°

Centro X50%

Centro Y50%

Gradiente ripetuto Livello luce soffusa Vignettatura Grana fine

Stop coloreSupporta 2-10 stop, con opacità e posizione

Modelli esempioBase colore da regolare

Esporta codice

Dopo l’anteprima, copia CSS o esporta file PNG, JPG, SVG, CSS e pacchetto risorse.

Formato codiceScegli il tipo di dichiarazione

Modalità codice

Nome classe / variabile

Includi sfondo fallback Comprimi codice

Codice CSS

Dimensioni immagineLe dimensioni personalizzate verranno usate per l'esportazione di immagini e SVG

Preset dimensioni

Qualità JPG92%

Larghezza (px)

Altezza (px)

Scarica risorseIl pacchetto include CSS, SVG, PNG e JSON impostazioni

Anteprima live

Gradient Preview Aggiornamento immediato dopo le modifiche

TipoLineare

Stop colore2

Dimensione export1920x1080

Lunghezza codice0

Istruzioni

Istruzioni per l'uso del software

Impostare il tipo di gradiente: scegli un gradiente lineare, radiale o conico. Il lineare è adatto a banner e sfondi web, il radiale a effetti di diffusione dal centro, il conico ad anelli, ruote dei colori e motivi decorativi.
Regolare direzione e forma:
- Gradiente lineare: puoi usare i pulsanti di direzione oppure impostare la direzione da 0 a 360 gradi con il cursore dell'angolo.
- Gradiente radiale: puoi impostare forma circolare o ellittica, area di diffusione e posizione X/Y del punto centrale.
- Gradiente conico: puoi impostare l'angolo iniziale e la posizione del punto centrale.
Configurare gli stop di colore: usa il selettore colore, il campo HEX, la percentuale di posizione e i parametri di trasparenza per controllare ogni stop di colore. Puoi aggiungere, eliminare, ordinare e invertire i colori, oltre a distribuire uniformemente gli stop con un clic.
Usare le opzioni degli effetti: puoi attivare gradiente ripetuto, livello di luce soffusa, vignettatura e texture fine, rendendo lo sfondo più adatto a hero section web, schede, poster e materiali di design.
Copiare ed esportare: in “Esportazione codice” scegli tra nome classe CSS, solo dichiarazione o modalità variabili CSS; puoi copiare il codice CSS oppure esportare file PNG, JPG, SVG, CSS e pacchetti ZIP di risorse.
Salvare e condividere: in “Salva e condividi” salva le impostazioni correnti, genera un link di condivisione oppure incolla codice CSS di gradiente esistente per importarlo nello strumento e continuare a modificarlo.

Domande frequenti

R: Il gradiente lineare crea una transizione lungo una direzione retta ed è adatto a sfondi web, pulsanti e banner; il gradiente radiale si diffonde verso l'esterno da un punto centrale ed è ideale per effetti di luce e sfondi stratificati; il gradiente conico ruota attorno al centro ed è adatto a ruote dei colori, anelli ed effetti decorativi.

R: fai clic su “Aggiungi colore” per aggiungere stop di colore, quindi imposta colore, percentuale di posizione e trasparenza per ciascuno. La posizione degli stop influisce sull'intervallo di transizione dei colori; puoi anche usare “Distribuisci uniformemente” per ordinare rapidamente gli stop.

R: I gradienti ripetuti sono adatti per creare sfondi regolari come strisce, onde e texture circolari ripetute. Per i gradienti lineari e radiali è possibile attivare la modalità di ripetizione; per i gradienti conici si consiglia di controllare l’effetto tramite punti colore e angoli.

R: È possibile esportare file PNG, JPG, SVG e CSS, oppure scaricare un pacchetto ZIP di risorse. Il pacchetto include codice CSS, file SVG, immagini PNG e impostazioni JSON, utile per l’archiviazione e successive modifiche.

R: Dopo aver copiato il codice CSS generato, basta incollarlo nel file di stile della pagina web. Lo strumento offre tre modalità: nome classe CSS, sole dichiarazioni e variabili CSS, selezionabili in base alle abitudini del progetto.

R: Sì. Nell’area “Importa CSS” di “Salva e condividi”, incolla il codice linear-gradient, radial-gradient o conic-gradient e fai clic su “Carica nello strumento” per continuare a regolare colori, angolo e posizione.

R: No. La generazione del gradiente, la copia del codice, il disegno delle immagini e la creazione del pacchetto di risorse vengono eseguiti localmente, senza necessità di caricare i contenuti di design sul server.