So nutzt du: 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.
Auch gesucht als: blob generator, blob shape generator, organic shape generator, random blob svg, blob maker, svg shape generator, abstract shape generator.
Passende Tools zu: 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.
- SVG-zu-PNG-Konverter — Rendere SVG-Vektorgrafiken als gestochen scharfe PNG-Bilder genau in der Größe, die du brauchst – für App-Stores, soziale Medien, E-Mails oder Dokumente.
Häufige Fragen
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.
Kann ich SVG Blob Generator als Web-App installieren und offline nutzen?
Ja. SVG Blob Generator ist eine installierbare Web-App (PWA) – sie wird über Ihren Browser installiert und nicht aus einem App-Store heruntergeladen. Klicken Sie oben auf dieser Seite in Chrome oder Edge (Windows, macOS, Linux, ChromeOS) auf „App installieren“ oder verwenden Sie auf Android-Geräten „Teilen“ → „Zum Startbildschirm hinzufügen“ auf dem iPhone und iPad bzw. „Datei“ → „Zum Dock hinzufügen“ in Safari 17+ auf einem Mac. Die App öffnet sich dann in einem eigenen Fenster mit einem eigenen Symbol, und da sie vollständig in Ihrem Browser ausgeführt wird, funktioniert sie auch offline. Firefox auf dem Desktop kann keine Web-Apps installieren. So funktioniert die Installation.