Generatore di sfondi sfumati animati — 11 stili WebGL, anteprima dal vivo
Anteprima di undici sfondi sfumati e astratti animati, renderizzati dal vivo con WebGL: blob fluidi, luce ambientale, sfumature a gradini, punti sfocati, griglie, cubi, onde e mosaici di triangoli. Cambia stile e sei palette integrate all'istante, senza upload né server: questo è uno strumento di anteprima dal vivo, non un esportatore CSS o di immagini.
Cosa offre davvero questo generatore di sfondi
Undici stili di sfondo guidati da shader
AbstractShape, AestheticFluid, AmbientLight, BigBlob, BlurDot, BlurGradient, GridArray, RandomCubes, StepGradient, TrianglesMosaic e WavyWaves: tutti animati di continuo su un canvas alto 600 pixel.
Cambia stile e palette all'istante
Due menu a discesa controllano tutto: uno per lo stile dello sfondo, uno per la palette. Ogni modifica ricostruisce subito l'animazione, senza pulsante di generazione e senza ricaricare la pagina.
Sei palette integrate
Monochrome, Red, Green, Blue, Yellow e Purple, ciascuna una lista fissa di sei colori esadecimali. Gli stili a quattro colori usano solo i primi quattro valori, quelli a sei colori tutti e sei; i colori in eccesso vengono troncati.
Funziona in locale sulla tua GPU
Ogni frame viene disegnato tramite WebGL nel browser. Non viene caricato nulla, non viene chiamato alcun server e l'animazione continua senza traffico di rete.
Un playground di anteprima, non uno strumento di esportazione
Non c'è output CSS, né download PNG o SVG, né pulsante casuale, né opzione rumore o texture, né preset salvati. Anche angolo, stop di colore, sovrapposizione e velocità non sono esposti.
FAQ sul generatore di sfondi
Quali tipi di sfumatura sono supportati: lineare, radiale, conica o mesh?
Nessuno dei tipi CSS, a rigor di termini. Questa pagina renderizza undici sfondi con shader WebGL: AbstractShape, AestheticFluid, AmbientLight, BigBlob, BlurDot, BlurGradient, GridArray, RandomCubes, StepGradient, TrianglesMosaic e WavyWaves. Alcuni sembrano sfumature fluide in stile mesh, ma sono animazioni su canvas, non sfumature background-image.
Cosa posso regolare?
Solo due cose: il menu a discesa dello stile e quello della palette. Non ci sono controlli per angolo, posizione degli stop di colore, livelli, selettore di colore, velocità, pausa o ciclo. Le palette sono sei campioni fissi e ogni stile ne usa quattro o sei.
Posso esportare lo sfondo come immagine?
No. Nella pagina non c'è alcun toDataURL, toBlob o logica di download, quindi il canvas può solo essere guardato e non salvato come PNG, JPEG o SVG.
Genera codice CSS che posso copiare?
No. Non c'è output CSS né pulsante di copia. Questi sfondi sono canvas WebGL, non sfumature background-image, quindi non si possono ridurre a uno snippet CSS; per quello serve uno strumento dedicato alle sfumature CSS.
Ci sono preset, generazione casuale, rumore o impostazioni salvate?
Gli unici preset sono le sei palette integrate. Non c'è pulsante casuale (il seed è fisso a 1000), né opzione rumore o texture, né salvataggio nella memoria locale: ricaricando la pagina si torna ad AbstractShape con la prima palette.
Cosa succede quando cambio stile o palette?
Ogni cambio crea una nuova istanza di sfondo e aggiunge un altro canvas allo stesso contenitore; la vecchia istanza non viene mai distrutta, quindi si impilano più canvas con lo stesso id e quello che vedi è il più recente. Ricarica la pagina se hai cambiato spesso.
È tutto in locale?
Sì. Il rendering avviene interamente nel tuo browser e sulla tua GPU tramite WebGL, senza upload né richieste al server. Il rovescio della medaglia: un browser senza supporto WebGL non ha alcun rendering di riserva.
