Generatore di sfondi sfumati animati CSS

Crea online sfondi sfumati animati, con supporto per più colori, direzioni di animazione e preset; genera codice CSS 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

Scegli prima i colori, poi regola l’animazione; infine copia o scarica il codice. I preset possono essere usati come esempi o modificati in colori, stop, direzione, velocità e uso di output. Anteprima, generazione e salvataggio avvengono in questa pagina.

Anteprima live CSS Keyframes Testo / Bordo / Sfondo Impostazioni salvabili

Numero colori-

Tipo di animazione-

Durata-

Uso di output-

Impostazioni colori

Partire da un preset è più rapido. Gli stop colore influenzano il ritmo della transizione: consigliati 2-6 colori.

Esempi Al clic sovrascrive i colori attuali

Base gradiente Lineare per sfondi web, radiale per effetti spotlight, conico per bordi o badge

Tipo di gradiente

Angolo gradiente135°

135°

Centro radiale / conico

Stop colore Mantieni 2 colori, fino a 8

Parametri animazione

Per sfondi pagina, usa una velocità più lenta. Per ridurre il movimento, attiva il codice compatibile.

Tipo di animazione Scegli una logica Keyframes diversa

Direzione movimento Influisce sui fotogrammi chiave di background-position

Velocità e ciclo Più grande è lo sfondo, più evidente è lo spostamento dei colori

Durata animazione10s

10s

Dimensione sfondo400%

400%

Curva animazione

Ciclo infinito Riproduzione alternata Pausa al passaggio Compatibilità movimento ridotto

Genera ed esporta

Imposta nome classe e scenario, copia il CSS nel file di stile del progetto e aggiungi la classe all'elemento target.

Impostazioni applicazione La stessa palette può creare effetti di sfondo, testo o bordo

Nome classe CSS

Uso di output

Altezza min. contenitore (px)

Raggio angoli (px)

Larghezza bordo (px)

Sfondo interno bordo

Codice CSS generato

HTML di esempio

Anteprima live

Animated Gradient Dopo aver regolato colori, direzione e velocità, l'effetto si aggiorna subito. Ideale per hero, aree pulsanti, landing page e card visive. CSS Ready

Tipo di gradiente-

Direzione-

Dimensioni-

Nome classe-

Istruzioni

Istruzioni per l'uso del software

Scegli la combinazione di colori: in “Impostazioni colori” fai clic su uno schema di esempio oppure aggiungi, elimina e regola manualmente colori e punti di stop.
Imposta il tipo di gradiente: scegli un gradiente lineare, radiale o conico e regola angolo e posizione centrale secondo necessità.
Configura i parametri dell'animazione: in “Parametri animazione” imposta modalità di scorrimento, direzione del movimento, durata, dimensione dello sfondo, curva di animazione e modalità di ripetizione.
Scegli l'uso dell'output: in “Genera ed esporta” seleziona contenitore di sfondo, testo sfumato o bordo sfumato e imposta parametri come nome della classe CSS, angoli arrotondati e bordo.
Visualizza l'anteprima: a destra puoi passare tra le modalità di anteprima sfondo, scheda, testo e bordo; genera il codice dopo aver confermato l'effetto.
Copia o scarica il codice: fai clic su “Copia CSS”, “Copia HTML” o “Scarica CSS” per applicare il codice agli elementi della pagina.
Salva le impostazioni: fai clic su “Salva impostazioni” per conservare i parametri attuali e continuare a modificarli la prossima volta.

Domande frequenti

R: Copia il codice CSS nel file di stile, quindi aggiungi il nome della classe presente nell'HTML di esempio all'elemento su cui vuoi mostrare il gradiente.

R: I gradienti lineari sono adatti a sfondi di pagina e banner; i gradienti radiali sono ideali per effetti di luce concentrata e diffusione morbida; i gradienti conici sono adatti a bordi, badge ed effetti visivi con senso di rotazione.

R: Puoi aumentare la dimensione dello sfondo, aggiungere più colori, regolare i punti di stop dei colori oppure scegliere modalità di animazione come scorrimento diagonale o scorrimento a respiro.

R: Sì. Seleziona “Testo sfumato” nell'uso dell'output e lo strumento genererà codice CSS contenente background-clip:text.

Risposta: in genere può essere utilizzato normalmente come sfondo della pagina. Se la pagina contiene molte animazioni, si consiglia di prolungare la durata dell’animazione, ridurre il numero di colori e abilitare il codice di compatibilità per la riduzione degli effetti dinamici.