SVG Blob Generator
Generate smooth, organic SVG blob shapes using Bézier curves — for backgrounds, hero sections, and modern UI decoration.
Last updated: March 25, 2026
Find this tool useful? Support the project to keep it free!
Buy me a coffeeWhat is SVG Blob Generator?
SVG blobs are organic, asymmetric shapes generated by connecting a ring of randomized control points using smooth cubic Bézier curves. Unlike geometric shapes (circles, rectangles) that feel rigid and mathematical, blobs have an organic, hand-drawn quality that became popular in web design circa 2018-2020 as a counterpoint to ultra-geometric flat design. They are used as background splashes, section dividers, container shapes for images, and decorative accents.
The generation algorithm places N control points (typically 6-8) evenly around a circle and then randomly displaces each point's radius — some points move inward (creating concavity), others outward (creating convexity). The points are connected using SVG cubic Bézier curves where the control handles are calculated to ensure C1/G1 continuity (smooth tangent transitions without sharp corners). The result is a closed SVG <path> element that can be scaled to any size, colored, animated with CSS, and used immediately in any HTML document or design tool.
How to Use SVG Blob Generator
Click "Generate" to create a random blob shape — each click produces a unique shape
Use the Complexity slider to control the number of corner points (3–8): more points = more irregular and complex shapes
Use the Smooth slider to control how smooth the curves are between points (high = very round balls, low = spikier shapes)
Choose a Fill Color or enable a CSS gradient fill for more visual depth
Click "Copy SVG Code" to copy the inline SVG, or "Download SVG" to save the file
Common Use Cases
- Creating an organic background splash behind a hero section headline on a landing page
- Using a blob as a clip-path mask to display a circular-ish profile photo with an organic edge instead of a perfect circle
- Decorating a pricing card or testimonial card with a colored blob watermark behind the text
- Generating a set of matching blob shapes in the same color family to create a cohesive section background pattern
- Using an animated blob (CSS animation of blob border-radius or Keyframes) for a living, organic loader or attention element
- Creating a blob shape as a section diagonal divider alternative to a straight line separator
- Placing a light-colored blob behind a product photo to float it off the page without a traditional box shadow
- Designing an icon or avatar background using a blob shape instead of a circle or rounded rectangle
Example Input and Output
Embedding a colored SVG blob directly in HTML as a hero background:
Points: 6
Smoothness: 85%
Fill: #7c3aed (purple)
Size: 600×600 viewBox<!-- Blob as a positioned background element -->
<div class="hero">
<svg viewBox="0 0 600 600"
class="hero-blob"
xmlns="http://www.w3.org/2000/svg">
<path d="M 260 58 C 318 72, 389 79, 412 145 C
435 211, 395 291, 358 348 C 321 405,
258 440, 201 422 C 144 404, 108 338,
98 272 C 88 206, 118 139, 173 103 C
228 67, 202 44, 260 58 Z"
fill="#7c3aed"/>
</svg>
<h1>Your hero headline</h1>
</div>
<style>
.hero { position: relative; }
.hero-blob {
position: absolute; top: -100px; right: -100px;
width: 600px; height: 600px;
opacity: 0.15; z-index: 0;
}
</style>Client-Side Processing
Blob generation is entirely computational — no data is sent to any server. The SVG path is generated in real-time by the browser's JavaScript engine.
CSS blob-div Hack
The CSS border-radius shorthand supports eight values defining separate horizontal and vertical radii for each corner: border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%. This creates an irregular ellipse that approximates a blob without any SVG. CSS-only blobs can be animated smoothly using CSS transitions on the border-radius values. Blob.app generates these CSS border-radius values if you need a pure-CSS approach without SVG.
Gradient and Gooey Effects
For SVG gradient fills, add a <defs> block with a <linearGradient> or <radialGradient> and reference it as fill="url(#gradient-id)". For "gooey blob" effects (blobs that merge together with a liquid look), use SVG feGaussianBlur + feColorMatrix with a high contrast matrix value — a classic SVG filter effect popularized by Lucas Bebber.
Frequently Asked Questions
How are SVG blobs generated mathematically?
Can I animate an SVG blob with CSS?
Can I use blobs as clip-path for images?
Are blob shapes free to use commercially?
What does the "Complexity" slider control?
How do I make a blob that looks similar each time (reproducible)?
How This Tool Works
N anchor points are computed at angular intervals (2π/N) around the center, with each radius perturbed randomly within the configured range. Cubic Bézier control handles are calculated at each anchor: the handle direction uses the angle of the line connecting the previous and next anchors (normalized), and the handle length is proportional to the distance between adjacent anchors multiplied by the smoothness factor. These anchor/handle pairs are assembled into an SVG path string: M [first point] C [handles] [next anchor] ... Z.
Technical Stack