FormatterHQ
JSON Tools XML Tools YAML Tools CSV & TSV Tools HTML Tools CSS Tools JavaScript Tools SQL Tools Code Formatters & Beautifiers Minifiers Validators Data Converters Data to Class Generators Escape & Unescape Encode & Decode Base64 Tools Hash & Cryptography String & Text Utilities Number Converters Color Converters Unit Converters IP & Network Tools Random Data Generators Diff & Compare Viewers & Editors Image Tools PDF Tools Markdown Tools SEO & Webmaster Tools Developer Utilities JSON Formatter PDF Tools XML Formatter Beautifiers Converters Blog

SVG Blob Generator

Create random organic blob shapes as clean SVG. Adjust complexity and randomness, choose a solid color, gradient or outline, and copy or download the file.

Loading tool…
Ready.

How to use the SVG Blob Generator

  1. Press Randomize for a new shape, or type a Seed to recreate a blob you liked.
  2. Set Complexity (number of points) and Randomness to control how lumpy the blob is.
  3. Pick a Colour, tick Gradient fill and choose a Gradient end, or tick Outline only for a stroke.
  4. Copy or download the SVG tab, or use the CSS background tab to apply it as a background image.

An SVG blob generator for organic shapes

This SVG blob generator draws smooth, irregular shapes that work as backgrounds behind photos, decorative accents in hero sections or containers for icons. Each blob is a single closed <path> in a 400 × 400 viewBox, so it is small, scales to any size without blurring and can be edited in any vector editor.

How the shape is made

The tool places a number of points evenly around a circle with a radius of 160 units (40% of the canvas). Each point is pulled toward the center by a random amount, up to the Randomness percentage. The points are then joined with a closed Catmull-Rom curve, converted to cubic Bézier C commands, which gives the rounded, organic outline. Because the random numbers come from a seeded generator, the same seed always produces the same blob.

Example output

The default blob (seed 42, 6 points, 40% randomness) with Gradient fill switched on:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" width="400" height="400">
  <defs>
    <linearGradient id="blob-gradient" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#0f766e"/>
      <stop offset="100%" stop-color="#6366f1"/>
    </linearGradient>
  </defs>
  <path fill="url(#blob-gradient)" d="M321.5,200C321.9,237.2 294.7,298.5 265.7,313.7C236.6,328.9 177.7,310.3 147.3,291.3C116.8,272.4 86.5,236.7 82.9,200C79.2,163.3 95.5,89.4 125.6,71.1C155.6,52.9 230.5,69.1 263.1,90.6C295.8,112.1 321.1,162.8 321.5,200Z"/>
</svg>

Options explained

  • Seed – identifies the shape; Randomize picks a new one.
  • Complexity – 3 to 16 points. Three or four give simple pebble shapes; twelve and above give wavy, cloud-like edges.
  • Randomness – 0% gives a smooth, nearly circular shape; high values give deep dents.
  • Gradient fill – a diagonal linear gradient from the main color to the gradient end color.
  • Outline only – removes the fill and draws a 6-unit stroke in the main color. It takes priority over the gradient.

Tips

  • Rename duplicate gradient IDs. If you paste several gradient blobs inline on one page, each uses id="blob-gradient", and the browser applies the first one to all of them. Give each a unique ID.
  • Make it responsive. Remove the width and height attributes, or set width: 100%; height: auto in CSS; the viewBox keeps the proportions.
  • Clip an image. Put the path in a <clipPath> and apply it to an <image> to crop a photo into the blob.
  • Background use. The CSS background tab creates a URL-encoded data URI; SVG to Base64 produces a Base64 version if you prefer.

Preview or edit the file in the SVG viewer. For section edges rather than floating shapes, try the SVG wave generator.

Privacy

Blobs are generated locally in your browser; nothing is uploaded.

Frequently asked questions

How do I change the blob color with CSS?
Replace the fill value in the SVG with currentColor, paste the SVG inline in your HTML and set the color property on it or its parent. This does not work when the SVG is loaded through <img> or a CSS background.
Can I animate a blob shape?
You can rotate or scale it with CSS transforms. To morph between two blobs, both paths need the same number of commands, which is true for two blobs with the same complexity, so they can be interpolated with SMIL or a JavaScript animation library.
Can I use the blob with border-radius instead of SVG?
A similar organic look can be made with the eight-value border-radius syntax, which is easy to animate but limited to four rounded corners. The SVG blob allows up to 16 points and irregular shapes that border-radius cannot produce.
How do I get the same blob again later?
Note the seed number and keep the other settings the same. The generator uses a seeded pseudo-random function, so the same inputs always produce an identical path.

Last updated October 3, 2026

Related tools

SVG Wave Generator Generate random SVG wave dividers for section breaks. Tune complexity, amplitude, layers and colour, then copy the SVG or a CSS background. SVG Optimizer (SVGO) Optimize and minify SVG files with SVGO in your browser: remove metadata, comments and editor cruft, round numbers and shorten paths. SVG to Base64 Convert SVG markup or an .svg file to a Base64 data URI for CSS backgrounds, img tags and JSON. SVG to CSS Data URI Encode SVG as an optimized URL-encoded data URI for CSS background-image or mask, with a Base64 version for comparison. SVG to JPG Converter Convert SVG graphics to JPG images with a chosen background colour, scale and quality — directly in your browser. SVG to JSX / React Component Turn SVG markup into a React component: camelCase attributes, className, style objects and {...props}, with optional TypeScript. CSS Animation Generator Generate CSS @keyframes animations — fade, slide, zoom, bounce, pulse, shake, spin and more — with duration, delay, easing and loop controls. CSS Background Pattern Generator Generate repeating CSS background patterns — stripes, polka dots, checkerboard, grid, zigzag and more — using only gradients, no images. CSS Border Radius Generator Set border-radius per corner in px or %, or shape organic blobs with the 8-value "fancy" border-radius syntax. Live preview and copyable CSS. CSS Box Shadow Generator Design layered CSS box-shadows with sliders for offset, blur, spread, colour and opacity. Supports inset shadows, presets and a Tailwind class. CSS Button Generator Design a CSS button with colours, gradient, padding, radius, border, shadow and hover/focus states, then copy clean HTML and CSS. CSS Clamp Generator (Fluid Typography) Calculate a CSS clamp() value that scales font size or spacing smoothly between two viewport widths, with a table of computed sizes.