SVG Blob Generator

How to use

1. 1Pick a preset to start with a smooth, wobbly, spiky, gradient, or ink-drop look, or skip presets and tune the sliders directly.
2. 2Set the complexity (number of points around the circle) and randomness (how much each point shifts in or out) until the blob has the energy you want.
3. 3Click Randomize shape to draw a new seed, or type a seed value to reproduce a specific blob. Same seed plus same options always renders the same shape.
4. 4Choose a solid color or a two-color gradient fill, set the background to transparent or a color, and pick a rotation and optional vertical flip.
5. 5Copy the SVG markup, the CSS background block, the CSS clip-path, the path d attribute, the Tailwind snippet, or the data URI from the export panel on the right.
6. 6Download a vector .svg for design tools or a rasterized .png at any size from 64 to 2048 pixels for use in slides, social posts, or app icons.

About this tool

SVG Blob Generator draws organic blob shapes built from a closed smooth Bezier curve through randomly perturbed points on a circle. Each blob is fully reproducible: the same seed plus the same options always renders the exact same shape, so you can save a seed in a design system and recreate the blob later without storing the SVG. Tune the shape with three sliders: complexity (3 to 14 points around the circle, more points yield more lobes), randomness (0 to 100 percent radial wobble, 0 stays a perfect circle and 100 produces sharp inkblot edges), and rotation (which point sits at the top). A flip-vertical toggle mirrors the shape for stacked designs. Fill the blob with a solid color or a two-color linear gradient at any angle, set the background to a color or full transparency, and export at any resolution from 64 to 2048 pixels. The output panel produces ready-to-paste SVG markup with a 500x500 viewBox that scales to any container, a CSS background-image block with a URL-encoded data URI (smaller than base64 and safe for inline styles), a CSS clip-path string that masks any element into the blob shape, a Tailwind CSS arbitrary value snippet for use as a background utility, the raw SVG path d attribute for animation libraries like GreenSock and Framer Motion, a downloadable .svg file for vector editors and Figma, and a rasterized .png file that preserves background transparency. Useful for landing-page hero illustrations, sticker-style profile picture frames, gradient card backgrounds, decorative section dividers, organic photo masks, and any project that needs a soft non-geometric shape. All path math, rendering, and PNG rasterization run in your browser using native SVG, the Canvas API, and a seeded PRNG, so nothing you generate is uploaded.

Free to use. Works in your browser. No signup, no login.