siutil. Blob Generator
processed in your browser · never uploaded

Output

Color

Contrast

60%

Complexity (points)

6

Preview

Code

 
Everything runs in your browser — your settings are never uploaded.
 
 
   
  
Generate the popular organic "blob" shapes — the soft, irregular forms you see in hero backgrounds, decorations, icon bases and social images — right in your browser. Pick from two outputs. (1) SVG mode places several control points around a circle and connects them with smooth cubic-bezier curves, giving a flowing outline you can copy as `<svg>` code. The "Complexity (points)" slider sets how many bumps the outline has and "Contrast" controls how far each point caves in; the "Randomize" button re-rolls the shape in one click. You can copy the SVG or export it as a 1024px transparent PNG, so you get an asset without opening Figma or Illustrator. (2) CSS mode uses the eight-value `border-radius` technique (`a% b% c% d% / e% f% g% h%`) to make a blob-like rounded shape from a single `div`, output as plain CSS. The preview updates live and a checkerboard shows the transparent areas. Your color, contrast, point count and output mode stay in your browser and are never uploaded, stored, or sent to a server.
How to use
  1. Choose an output mode (SVG or CSS border-radius) and pick a color.
  2. Adjust "Contrast" for how much the edges cave in, and in SVG mode "Complexity (points)" for outline detail. Hit "Randomize" to re-roll the shape.
  3. Use "Copy" to grab the SVG or CSS. In SVG mode, "Download PNG" exports a transparent PNG.
FAQ
What is a blob?
A blob is a soft, organic shape — not a circle or polygon, but a smooth, asymmetric form. With no hard corners, blobs give a soft, modern feel and are popular for hero backgrounds, decorations, icon bases and social images.
What's the difference between SVG and CSS border-radius?
SVG mode outputs a free-form outline as an `<svg>` path by connecting control points smoothly, so you can make complex, bumpy shapes. CSS mode uses the eight-value `border-radius` technique to make a blob-like rounded shape from a single `div` with no image. Pick whichever fits your use.
Can I export a PNG?
Yes. In SVG mode the "Download PNG" button exports a 1024px PNG with a transparent background, so you can use the blob directly as an image asset.
Can I get the same shape again?
Your settings — color, contrast and point count — are saved in your browser and restored on your next visit. The shape itself changes each time you press "Randomize," but stays the same as long as you don't.
Are my settings uploaded anywhere?
No. Generation, preview and PNG export all run entirely in your browser. Your color and settings are never uploaded, stored, or sent to a server — the tool is fully local.