Generatore di SVG Blob
Crea forme organiche uniche in SVG blob per sfondi, avatar, elementi decorativi e UI design. Controlla complessità, casualità, gradienti, animazioni e altro - esporta come SVG, PNG o CSS.
Controlli Forma
Preset di Stile
Tipo di Riempimento
Colore Solido
Tratto
Animazione
Livelli Blob
Sfondo
Anteprima Live
Esporta
Come Creare Forme SVG Blob
Forma & Stile
Imposta complessità e casualità per la forma organica. Scegli un colore solido, un gradiente lineare o radiale con punti di colore personalizzati.
Anima & Livelli
Aggiungi animazioni CSS di morphing, rotazione, pulso o fluttuazione. Sovrapponi più livelli blob con colori e modalità di fusione diversi per profondità.
Esporta & Usa
Scarica come SVG o PNG, copia il codice raw, genera un clip-path CSS o esporta un componente React JSX pronto all'uso.
A Cosa Servono gli SVG Blob?
Sfondi Hero
Blob organici come elementi decorativi di sfondo danno alle landing page un aspetto moderno e fluido che si distingue dalle semplici forme geometriche.
Cornici per Immagini
Usa clip-path CSS con una forma blob per ritagliare foto e avatar in cornici organiche - una tecnica popolare nel web design moderno.
Accenti Animati
Blob che si trasformano lentamente aggiungono vita e movimento alle interfacce senza essere distrattivi - perfetti per sezioni hero e schermate di avvio.
Decorazione UI
Blob come sfondi per card, contenitori di icone, badge di notifica e divisori di sezione creano gerarchia visiva e personalità del brand.
Illustrazioni per App
Blob colorati con gradiente dietro screenshot di app e mockup di dispositivi creano un senso di profondità e professionalità nelle immagini di prodotto.
Identità del Marchio
Forme blob personalizzate usate in modo coerente sui materiali di un marchio creano un linguaggio visivo immediatamente riconoscibile.
Domande Frequenti
Come vengono generate le forme blob?
I blob vengono creati posizionando N punti di ancoraggio equidistanti attorno a un cerchio, quindi spostando casualmente ciascun punto verso l'esterno o l'interno usando una funzione casuale basata su seed. Curve Bezier cubiche morbide vengono disegnate attraverso i punti per creare il contorno organico.
Cos'è un seed e perché è importante?
Il seed è un numero che inizializza il generatore casuale. Lo stesso seed produce sempre la stessa forma blob - utile per ricreare o condividere un design specifico. Clicca sull'icona del lucchetto per preservare il tuo seed corrente quando premi Casuale.
Come uso il blob come maschera immagine in CSS?
Clicca su CSS clip-path per ottenere un valore clip-path: path(). Applicalo a qualsiasi elemento: img { clip-path: path('M...'); }. Per un ritaglio basato su percentuali che si ridimensiona, usa invece la variante polygon().
Posso usare l'esportazione React nel mio progetto?
Sì - l'esportazione React produce un componente funzionale con SVG inline che accetta props width, height e className. Copialo nel tuo progetto e usalo come qualsiasi componente React: <BlobShape width={400} />.
Come animo il blob in CSS?
Abilita l'animazione nella scheda Anima - l'esportazione SVG include un tag <style> incorporato con l'animazione CSS @keyframes. Per l'animazione morph, l'output usa elementi <animate> per transizioni tra forme di percorso blob.
Qual è il miglior formato di esportazione?
Usa SVG per uso web, illustrazioni e grafica scalabile - rimane nitido a qualsiasi dimensione. Usa PNG quando hai bisogno di un'immagine raster per social media, presentazioni o email. Usa CSS clip-path quando vuoi ritagliare elementi HTML anziché visualizzare un'immagine SVG.