Blob Generator

Generate random organic blob shapes as SVG and CSS.

Presets:

Soft
Organic
Wild
Brand
Ocean

Complexity (points)

6

Randomness

45%

SVG size

400px

SVG path blob
CSS border-radius blob
SVG
<svg viewBox="0 0 400 400" width="400" height="400" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="blob-gradient" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#D10505"/>
      <stop offset="100%" stop-color="#FF8A5B"/>
    </linearGradient>
  </defs>
  <path d="M200,59.9C246.4,62 307,90.2 328.4,125.9C349.8,161.6 350,236.6 328.6,274.3C307.2,311.9 242.3,352.1 200,351.7C157.7,351.4 99.9,312 74.9,272.2C49.8,232.5 28.9,148.7 49.8,113.3C70.6,77.9 153.6,57.8 200,59.9Z" fill="url(#blob-gradient)"/>
</svg>
CSS blob
.blob {
  width: 200px;
  height: 200px;
  background: linear-gradient(135deg, #D10505, #FF8A5B);
  border-radius: 53% 54% 43% 47% / 61% 60% 52% 51%;
}

Blob Generator – Organic SVG and CSS Shapes

Soft, irregular blobs are a staple of modern landing pages: behind hero images, around avatars, as section dividers, or as decorative background shapes. Click Random until you like a shape, fine-tune it with the sliders, and download it as an SVG file or copy a pure-CSS version.

Controls

  • Complexity – the number of points around the shape. Three to five points give simple pebbles; ten or more create wavy, flower-like outlines.
  • Randomness – how far each point may move toward the center. At 0% you get a perfect circle; at 100% the shape becomes dramatic.
  • Size – the width and height of the SVG view box.
  • Colors – a solid fill or a diagonal two-color gradient.
  • Seed – every shape comes from a seed number. The same seed and settings always produce the same blob, so you can note a seed and recreate a shape later.

SVG or CSS?

The SVG blob uses a smooth path: the generator places points on a circle at random distances and connects them with cubic Bézier curves (a Catmull-Rom spline), so there are never sharp corners. SVG scales to any size, can be used as an <img>, inline in HTML, or as a CSS background, and works in design tools like Figma.

The CSS blob uses only border-radius with eight percentage values. It needs no extra file, can contain text or an image, and can be animated by transitioning between two radius sets – a popular "morphing blob" effect:

.blob { transition: border-radius 1s ease-in-out; }
.blob:hover { border-radius: 40% 60% 60% 40% / 60% 30% 70% 40%; }

Tips

Place blobs behind content with position: absolute and a negative z-index, lower their opacity for backgrounds, and combine two blobs in different colors for depth. To shape a single element precisely, use the Border Radius Generator.

Frequently Asked Questions

Yes. The shapes are generated in your browser from random numbers; you can use the SVG and CSS in any personal or commercial project without attribution.

Note the seed number. Entering the same seed with the same complexity, randomness, and size always recreates the identical shape.

For the CSS blob, transition or animate the border-radius between two eight-value sets. For SVG, animate between two paths with the same number of points using SMIL or a JavaScript library.