Free · Seed-based · SVG + clip-path

Organic blobs for hero sections.

Procedural SVG blobs — reroll the seed, tune the edges, copy as SVG, CSS clip-path, or a React component.

SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"><defs><linearGradient id="blob-grad" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#34d399" /><stop offset="100%" stop-color="#047857" /></linearGradient></defs><path d="M 474.05 250.00 C 471.36 318.63, 418.14 407.23, 360.79 441.89 C 303.43 476.56, 184.39 489.97, 129.92 457.98 C 75.45 426.00, 30.42 313.14, 34.00 250.00 C 37.57 186.86, 94.20 115.81, 151.37 79.16 C 208.53 42.51, 323.19 1.61, 376.97 30.09 C 430.75 58.56, 476.75 181.37, 474.05 250.00 Z" fill="url(#blob-grad)"  /></svg>

CSS clip-path

clip-path: polygon(94.81% 50.00%, 72.16% 88.38%, 25.98% 91.60%, 6.80% 50.00%, 30.27% 15.83%, 75.39% 6.02%);

React component

export function Blob({ className }: { className?: string }) {
  return (
    <svg viewBox="0 0 500 500" className={className} xmlns="http://www.w3.org/2000/svg">
      <path d="M 474.05 250.00 C 471.36 318.63, 418.14 407.23, 360.79 441.89 C 303.43 476.56, 184.39 489.97, 129.92 457.98 C 75.45 426.00, 30.42 313.14, 34.00 250.00 C 37.57 186.86, 94.20 115.81, 151.37 79.16 C 208.53 42.51, 323.19 1.61, 376.97 30.09 C 430.75 58.56, 476.75 181.37, 474.05 250.00 Z" fill="currentColor" />
    </svg>
  );
}

Shape

Complexity

6

Irregularity

40%

Fill

From

emerald-400#34d399

neutral
stone
zinc
slate
gray
red
orange
amber
yellow
lime
green
emerald
teal
cyan
sky
blue
indigo
violet
purple
fuchsia
pink
rose

To

emerald-700#047857

neutral
stone
zinc
slate
gray
red
orange
amber
yellow
lime
green
emerald
teal
cyan
sky
blue
indigo
violet
purple
fuchsia
pink
rose
— How it works

Four steps

  1. 1

    Pick a seed

    Each seed produces a deterministic blob. Reroll until you love it.

  2. 2

    Tune the shape

    Complexity changes the number of points; irregularity adds organic edges.

  3. 3

    Pick a fill

    Solid Tailwind shade or a vertical gradient. Transparent is supported.

  4. 4

    Copy the export

    Standalone SVG, a CSS clip-path value, or a React component.

— Questions

Frequently asked

What's complexity vs irregularity?+

Complexity is the number of anchor points around the circle (3–10). Irregularity is how far each point drifts from the radius — 0 is a perfect circle, 1 is very wobbly. Together they control how 'rounded' vs 'amorphous' the blob feels.

Can I use this as a CSS clip-path?+

Yes — the output includes a polygon clip-path approximation of the blob. Apply it to any element to cut it into the same shape. For curved edges specifically, use the raw SVG in an <svg> mask instead.

Why seed-based?+

Reproducibility. Same seed, same blob — so if you find one you love, the seed number is the identifier you write down.

— More free tools

Keep building

Noise texture

Add SVG grain over any Tailwind background. Export a PNG overlay or a sub-1-KB CSS data-URI snippet.

App icon maker

Design an iOS or Android app icon from 150+ Tabler icons and the full Tailwind palette.

— Shipping to the App Store?

Translating screenshots into every locale is what lokal was built for. Upload once, ship to every store.

Explore lokal