What is an SVG blob?

A blob is a soft, organic shape with no straight edges, somewhere between a circle and a splash. Blobs are a popular decoration in modern web design: behind hero images and illustrations, as avatar frames, as section backgrounds, or as playful buttons and badges. Because they are vector graphics, they stay crisp at any size and weigh only a few hundred bytes.

Tool description

This tool generates random blob shapes as clean SVG code in your browser. Press Randomize until you like the shape, then fine-tune how many bumps it has, how irregular it is, and how round its curves are. Fill it with a solid color or a gradient, or draw it as an outline, and optionally make it morph between shapes in a smooth loop. Download the result as SVG or PNG, or copy it as SVG markup, a CSS background, or a CSS clip-path.

Features

  • Random blobs you can reproduce: the same seed and settings always give the same shape
  • Adjustable complexity, randomness, and smoothness, from round pebbles to spiky stars
  • Solid, gradient, or outline fill with any color
  • Morph animation that loops between shapes, built into the SVG with no JavaScript
  • Download as SVG or transparent PNG at the size you choose
  • Copy-ready SVG, CSS background, and CSS clip-path code

How it works

The tool places points around a circle, moves each one inwards by a random amount, and draws a smooth closed curve through them. The curve is measured exactly and scaled so the blob fills the image from edge to edge. A seeded random number generator decides every point, so a seed number or word brings back the same blob later. For the animation, several blobs with the same number of points are placed in one SVG animate element, and the browser blends between them.

Tips

  • Five to eight points with medium randomness give classic blob shapes; lower randomness looks calmer and more professional.
  • Turn smoothness down to 0% for crystal or gem-like polygons.
  • Use the CSS clip-path code to crop a photo or video into the blob shape.
  • Write down the seed, or type your own word as the seed, to recreate a blob exactly later.
  • Keep the morph animation slow, around 8 to 15 seconds per loop, so it stays calm in the background.