blob generator

How to use the blob generator

  1. Adjust point count (5-12) and complexity to control shape irregularity.
  2. Click regenerate for a new random blob; drag points to fine-tune.
  3. Pick fill: solid color, gradient, or a photo mask.
  4. Export as SVG (scalable) or copy as an inline <svg> component.

When to use it

Use blobs for decorative page accents — hero background accents, feature illustrations, logo masks. Stripe, Notion, and Linear all use blob-style decorative shapes. Don't use as content containers; their irregular edges make text-wrapping awkward. Alternative: Blobs.app has deeper preset library; this tool integrates with our clip-path and gradient generators.

Frequently asked questions

Are SVG blobs accessible?
Decorative blobs should have aria-hidden="true" so screen readers skip them. Blobs carrying meaning (e.g., a brand logo blob) need role="img" + aria-label.
Can I animate the blob shape?
Yes — animate the SVG path's d attribute with SMIL or GSAP's MorphSVG plugin. Requires same point count between start and end shapes.
How do I use a blob as a photo mask?
Set the blob as clip-path on the image via clip-path: url(#blob-id) referencing an inline <svg><clipPath id="blob-id">...</clipPath></svg>.

Related generators

Last updated: 2026-04-23