Como usar: 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.
Também pesquisado como: blob generator, blob shape generator, organic shape generator, random blob svg, blob maker, svg shape generator, abstract shape generator.
Ferramentas que combinam com: 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.
- Conversor de SVG para PNG — Converta gráficos vetoriais SVG em imagens PNG nítidas, exatamente no tamanho que você precisa — para lojas de aplicativos, redes sociais, e-mail ou documentos.
Perguntas frequentes
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.
Posso instalar o SVG Blob Generator como um aplicativo da web e usá-lo offline?
Sim. O SVG Blob Generator é um aplicativo da web instalável (PWA) — instalado a partir do seu navegador, não baixado de uma loja de aplicativos. Clique em “Instalar aplicativo” na parte superior desta página no Chrome ou no Edge (Windows, macOS, Linux, ChromeOS) ou, no Android, use “Compartilhar” → “Adicionar à tela inicial” no iPhone e no iPad, ou “Arquivo” → “Adicionar ao Dock” no Safari 17+ em um Mac. Em seguida, ela se abre em uma janela própria com seu próprio ícone e, como é executada inteiramente no seu navegador, continua funcionando offline. O Firefox no desktop não permite a instalação de aplicativos da web. Como funciona a instalação.