Blob Generator
Generate organic SVG blob shapes from a reproducible seed
<svg xmlns="http://www.w3.org/2000/svg" width="480" height="480" viewBox="0 0 480 480"><path d="M240 63.606C290.04 63.238 365.868 107.717 392.034 152.223C418.199 196.729 422.334 287.838 396.995 330.641C371.656 373.444 293.74 408.228 240 409.041C186.26 409.854 99.259 377.953 74.557 335.518C49.856 293.083 64.218 199.751 91.792 154.432C119.366 109.113 189.96 63.974 240 63.606Z" fill="#6366f1" stroke="none" stroke-width="0"/></svg>
What is Blob Generator?
Blob Generator creates smooth, organic SVG shapes for landing pages, avatars, decorations, illustrations, and section backgrounds. Every blob comes from a seed, so the same seed and settings always reproduce exactly the same shape.
How to use
- 1.Adjust complexity (number of points) and irregularity, or press Randomize for a new seed.
- 2.Set the width and height between 64 and 2048 px.
- 3.Choose a solid or two-color gradient fill with an angle, and an optional stroke.
- 4.Copy the SVG or a React JSX component, download the SVG, or export a PNG at 1×, 2×, or 3×.
- 5.Use Reset to return to the default blob.
Outputs and options
SVG output keeps a viewBox, so it scales cleanly. Gradient fills use an id derived from the settings, which keeps several inline blobs on one page from clashing. JSX output is a component that spreads props onto the svg element. CSS border-radius mode creates a lighter-weight blob from an 8-value border-radius on a plain box, with its own copyable CSS.
Limits and privacy
Shapes are smooth closed curves around the center; higher irregularity creates deeper inward dents. CSS mode shapes differ from SVG shapes for the same seed and cannot be exported as PNG. Generation and PNG rendering happen in your browser.
