What the blob generator makes
A blob is an organic shape without corners. This blob generator places a number of points in a circle, pushes each one in or out by a random amount and joins them with smooth curves. Three to five points give a soft pebble, ten or more a cloud with many bumps. The irregularity slider decides how far the points move: at 0 you get a circle, at 100% a wild shape that can nearly fold in on itself. Every random decision comes from the seed, so you can shuffle through shapes and go back to one you liked with its link.
The fill can be a solid color, a two-color gradient at any angle or nothing at all, and a stroke draws an outline in a second color. With a stroke and no fill you get a line drawing, with a thick stroke in white or black a sticker look. The cluster mode scatters many blobs over a canvas of your chosen aspect, each with its own outline, a random size and a random opacity, which reads as a loose texture or a confetti background.
How designers use blob shapes
- Hero backgrounds: a large soft gradient blob behind a headline gives a page depth without a photo. Set the aspect to 16:9 and download a wide PNG, or place the SVG and let it scale.
- Image masks: clip a portrait or a product photo to a blob with the clip-path snippet below the preview, or import the SVG into your design tool and use it as a mask.
- Section dividers and accents: small outlined blobs break up a grid of cards, a single colored blob marks a feature. For dividers that run across a section, use the wave generator instead.
- Textures: the cluster mode with Seamless tile on makes a pattern you can repeat behind a whole page. Low opacity variation and a color close to the background keep it subtle.
- Print and slides: export a PNG at 2048 or 4096 px for slides and social posts, or the SVG for print work where the shape must stay sharp at any size.
SVG or PNG for a blob?
The SVG is the shape itself: a short path, a gradient definition and an optional stroke. It stays sharp at any size, weighs a few hundred bytes and opens in vector editors, where you can still move the points or change the colors. Websites can embed it inline, as an img or as a CSS background. The PNG is a picture of the shape at a fixed size. Choose it for tools that do not accept SVG, and pick a width at least as large as the area it will cover so it does not look soft. The PNG keeps the transparent area around the blob unless you set a background color, so it sits cleanly on any color.
How the seamless tile works
A tile is seamless when its right edge continues on its left edge and its bottom continues on its top. In cluster mode with Seamless tile on, the generator lets blobs sit anywhere on the canvas, including across an edge, and draws a copy of every edge-crossing blob on the opposite side. Repeat the tile in both directions and the joins disappear. The preview shows the tile four times so you can check it. Download the single tile as SVG or PNG, or copy the CSS, which puts the SVG into a background-image and sets the tile size.
How to use the blob generator
- 1Pick a preset that is close to what you need, or stay with the pastel gradient.
- 2Press Shuffle until the outline looks right, then fine-tune complexity, irregularity, size and rotation with the sliders.
- 3Set a solid color, a gradient with its angle or no fill, and add a stroke if you want an outline.
- 4Switch to Cluster for a scatter of blobs, set their number and how much their size and opacity vary, and turn on Seamless tile for a texture.
- 5Choose the aspect and a background or keep it transparent, then download the SVG or a PNG at the width you need, copy the SVG code, the clip-path or a link to this exact shape.
Frequently asked questions
What is a blob shape and where do designers use it?
A blob is a soft, rounded shape with no straight edges, drawn from a handful of points that are pushed in and out at random and joined by smooth curves. Designers put blobs behind headlines and product photos, use them as a mask for portraits, as a background for a section, or scatter small ones as a texture. Because the edges are organic, a blob loosens up a layout full of rectangles.
Should I download the SVG or the PNG?
Take the SVG whenever the design tool or the website supports it. It is a vector file, so it stays sharp at any size, is only a few hundred bytes and keeps the gradient and the stroke editable in a vector editor. The PNG is a fixed grid of pixels. Use it where SVG is not accepted, like some slide, video or social media tools, and pick a width at least as large as the space it will fill.
Is the PNG transparent?
Yes, unless you set a background color. With the Transparent box checked, the preview shows a checkerboard behind the blob and the PNG has see-through pixels around the shape, so it sits on any background. Set a background color when the file goes into a tool that cannot handle transparency.
Why does the same seed give the same blob?
Every random decision, the bumps of the outline, the position and size of each blob in a cluster, comes from a random number generator that starts from the seed text. The same seed with the same settings always produces the same numbers, and so the same picture. The share link carries the seed and every setting, which is why it opens exactly the shape you see.
How do I use the clip-path snippet?
Paste the small SVG with the clipPath into your HTML, once per page, and give the image or box the clip-path rule from the second part of the snippet. The path uses objectBoundingBox units, so the shape stretches to the size of the element it clips. A square image keeps the proportions you see here, a wide one gets a wider blob.
How does the seamless tile work in cluster mode?
With Seamless tile on, a blob that crosses the right edge continues on the left edge, and one that crosses the bottom continues at the top. The downloaded file is one tile, and the preview shows four copies side by side so you can check the joins. Copy the CSS to use the tile as a repeating page background.