Comment utiliser : SVG Blob Generator
- Click New random blob until you like the shape.
- Use Complexity for more or fewer bumps and Randomness for a rounder or wilder outline.
- Pick a solid color, a gradient or an outline.
- Download it as SVG (scales to any size) or PNG, or copy the SVG code into your HTML.
How the blobs are made
The generator places points around a circle, moves each one in or out by a random amount, and joins them with a smooth closed curve (cubic Bézier segments through every point). More points give more bumps; more randomness gives a less circular outline. The result is a single <path> — tiny, crisp at any size and easy to recolor.
Using blobs on a website
- Background decoration: place the SVG absolutely behind a hero section, with a soft color or low opacity.
- Image masks: use the blob as a
mask-imageor turn the path into aclip-path: path()to crop a photo into the shape. - Animation: generate two blobs with the same complexity and animate between them with CSS or SMIL for a “morphing” effect.
Need a pure-CSS shape instead? The Border Radius Generator makes blobs with 8 radius values. For section dividers, try the SVG Wave Generator.
Aussi recherché comme : blob generator, blob shape generator, organic shape generator, random blob svg, blob maker, svg shape generator, abstract shape generator.
Outils complémentaires : SVG Blob Generator
- CSS Clip-path Generator — Cut images and elements into any shape: pick one of 15 starting shapes — triangle, hexagon, star, arrow, chevron, speech bubble, circle, ellipse, rounded inset… — then drag the points over a sample or your own image.
- CSS Gradient Generator — Design a gradient visually — drag color stops, change the angle or type, start from a preset — and copy production-ready CSS with a solid fallback color.
- SVG Optimizer — Clean up SVGs exported from Figma, Illustrator, Inkscape or Sketch with SVGO — and check the before/after preview to make sure the icon still looks right.
- Convertisseur SVG en PNG — Générez des images PNG d'une grande netteté à partir de graphiques vectoriels SVG, exactement à la taille dont vous avez besoin — pour les boutiques d'applications, les réseaux sociaux, les e-mails ou les documents.
Questions fréquentes
How do I make a blob shape?
Click New random blob, adjust complexity and randomness, and download the SVG. Each blob is a single smooth path.
Can I use the blobs commercially?
Yes. The shapes are generated randomly on your device — use them in any project, no attribution needed.
How do I put an image inside a blob?
Use the SVG as a CSS mask (mask-image: url(blob.svg)) on the image, or copy the path into an SVG clipPath.
SVG or PNG?
SVG for websites — it stays sharp at any size and is tiny. PNG for apps that don’t accept SVG, such as some slide or social tools.
Puis-je installer SVG Blob Generator en tant qu’application web et l’utiliser hors ligne ?
Oui. SVG Blob Generator est une application web installable (PWA) : elle s’installe depuis votre navigateur, sans passer par une boutique d’applications. Cliquez sur « Installer l’application » en haut de cette page dans Chrome ou Edge (Windows, macOS, Linux, ChromeOS) ; sur Android, utilisez « Partager » → « Ajouter à l’écran d’accueil » sur iPhone et iPad ; ou « Fichier » → « Ajouter au Dock » dans Safari 17+ sur Mac. L’application s’ouvre alors dans sa propre fenêtre avec sa propre icône, et comme elle s’exécute entièrement dans votre navigateur, elle continue de fonctionner hors ligne. Firefox sur ordinateur de bureau ne permet pas d’installer d’applications web. Comment fonctionne l’installation.