CodesBeautify

CSS Blob Generator

Shape an organic blob and take it away as an SVG path or a CSS border-radius rule.

SVG and CSS6 points, 30% wobble, seed 42
<svg viewBox="0 0 300 300" width="300" height="300" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Decorative blob">
  <path fill="#6366f1" d="M150,38.8 C184.1,36.6 245.3,55.1 263.8,84.3 C282.2,113.5 279.7,185.3 260.7,213.9 C241.8,242.6 183.9,257.9 150,256.2 C116.1,254.5 72.3,230.1 57.1,203.6 C41.9,177.2 43.4,124.9 58.9,97.4 C74.4,69.9 115.9,40.9 150,38.8 Z" />
</svg>
Runs locally in your browser

About the CSS Blob Generator

Blobs are the soft, irregular shapes used behind hero images, avatars and section dividers. This generator places a ring of points around a circle, nudges each one in or out by a random amount, then joins them with a closed Catmull-Rom spline converted to cubic beziers so the outline stays smooth instead of showing corners. Raising the point count makes the silhouette busier; raising the wobble percentage pushes the radii further from the circle.

The seed number drives a small deterministic pseudo-random generator, which means the same seed always redraws the same blob. Note it down when a shape works, and a colleague running the same settings gets an identical path. Two output formats are available and they are not interchangeable. The SVG path is exact and can hold any silhouette, so use it when the shape matters. The CSS form is eight border-radius percentages on a plain box, which is lighter and animates smoothly between states, but it can only produce gentle four-lobed shapes, never a deep concave curve.

Paste the SVG straight into your markup, or drop it into SVG Viewer to check it renders, then SVG to Base64 if you need it as a CSS background. For rounded corners on ordinary boxes the CSS Border Radius Generator is the simpler tool.

How to use

  1. Pick SVG path, CSS border-radius or both.
  2. Set the point count and wobble until the silhouette looks right.
  3. Change the seed to roll a different shape at the same settings.
  4. Set the fill colour and size, then copy the code.

Common questions

Why does the same seed always give the same blob?
The point offsets come from a seeded pseudo-random generator, so a seed plus the other settings fully determines the shape. Change the seed for a new one.
Should I use the SVG or the CSS version?
SVG for anything with a deep curve or a shape you care about exactly. CSS border-radius is lighter and animates well, but only produces soft four-lobed shapes.
Can I animate a blob?
Yes. Generate two CSS blobs at different seeds and transition the border-radius between them, or animate the SVG path with a d attribute of the same command count.
How do I change the colour later?
Edit the fill attribute on the path, or drop the fill and set the colour in CSS with the fill property.