0xdump

SVG Tools

Blob Generator

Generate organic SVG blob shapes and copy or download the output.

Live tool

Generate an organic SVG blob

SVG output

Raw markup

<svg xmlns="http://www.w3.org/2000/svg" width="320" height="320" viewBox="0 0 320 320" fill="none">
  <path fill="#5b4bff" fill-opacity="1" stroke="#ffffff" stroke-width="0" d="M 256.47 120.38 Q 273.70 160.00 256.91 200.06 Q 240.11 240.11 200.06 250.92 Q 160.00 261.74 122.93 247.94 Q 85.86 234.14 71.49 197.07 Q 57.12 160.00 67.35 118.78 Q 77.57 77.57 118.78 63.26 Q 160.00 48.94 199.62 64.85 Q 239.24 80.76 256.47 120.38 Z" transform="rotate(0 160.00 160.00)"/>
</svg>

CSS background

Inline background snippet

background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22320%22 height=%22320%22 viewBox=%220 0 320 320%22 fill=%22none%22%3E%0A  %3Cpath fill=%22%235b4bff%22 fill-opacity=%221%22 stroke=%22%23ffffff%22 stroke-width=%220%22 d=%22M 256.47 120.38 Q 273.70 160.00 256.91 200.06 Q 240.11 240.11 200.06 250.92 Q 160.00 261.74 122.93 247.94 Q 85.86 234.14 71.49 197.07 Q 57.12 160.00 67.35 118.78 Q 77.57 77.57 118.78 63.26 Q 160.00 48.94 199.62 64.85 Q 239.24 80.76 256.47 120.38 Z%22 transform=%22rotate(0 160.00 160.00)%22/%3E%0A%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
background-position: center;

What is an SVG blob

A blob is an irregular organic vector shape often used for backgrounds, badges, and decorative framing.

Because the output is SVG, the shape stays crisp at any size and remains lightweight compared with raster images. It is especially useful when you want soft, abstract shapes behind content without adding a bitmap asset.

How to use blob backgrounds in websites

Blobs work best as accents, not as the primary structure of a page.

  • Place them behind hero copy or callout sections.
  • Use them for profile badges, illustration frames, or avatars.
  • Export them as inline SVG or CSS backgrounds depending on the use case.
  • Keep color and scale restrained when the page already has strong motion or texture.

SVG vs PNG for decorative shapes

For generated abstract vectors, SVG is usually the better first choice.

  • SVG scales cleanly at any resolution.
  • SVG output is easier to recolor or edit later.
  • PNG can still be useful if the shape is heavily filtered or rasterized on purpose.

FAQ

Quick answers for the most common blob questions.

Soft organic

Balanced shape for hero decorations and soft backgrounds.

Spiky accent

Sharper silhouette for bolder decorative moments.

Rounded cloud

More pillowy volume with lower contrast in the edges.

Why is the seed useful?

The seed makes the output deterministic, which means you can return to the same shape later without saving the full SVG separately.

Related Tools

Keep exploring

Gradient Generator

Live

Build linear, radial, and conic gradients with live CSS output.

Open tool

Box Shadow Generator

Live

Tune offset, blur, spread, and inset values for cleaner elevation.

Open tool

Border Radius Generator

Live

Shape corners visually and export precise border-radius values.

Open tool