A blob is a soft, irregular closed shape used behind photos, icons and hero text. This generator makes them two ways: as an SVG path drawn through randomly pushed points around a circle, or as plain CSS using eight border-radius percentages. The CSS version can morph between shapes with a short @keyframes animation you copy.
| SVG path blob | CSS border-radius blob | |
|---|---|---|
| Shape range | Any number of bumps, very irregular | Egg and pebble shapes with four soft sides |
| Holds content | As a background image or mask | Yes, it is a normal box with text or an image inside |
| Morph animation | Needs JavaScript or SMIL | @keyframes on border-radius |
| Output | An svg element or .svg file | A few lines of CSS |
Updated
Blobs soften rigid grid layouts and give a brand a shape that is its own. Every blob here comes from a seed number, so the same settings and seed always rebuild the same shape. Try the SVG mode for many-lobed shapes, then switch to CSS mode when you want a box that wobbles slowly.
Each shape comes from the seed shown under the preview. Change the sliders or roll a new seed, then copy the SVG or CSS.
Three border-radius shapes in one alternating animation, plus a slow turn. The reduced motion query stops it for people who ask for less movement.
<style>
.blob { width: 180px; height: 180px; margin: 10px auto;
background: linear-gradient(135deg, #4F98FB, #a855f7);
border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
animation: morph 8s ease-in-out infinite alternate; }
@keyframes morph {
0% { border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%; transform: rotate(0deg); }
50% { border-radius: 70% 30% 46% 54% / 30% 39% 61% 70%; }
100% { border-radius: 30% 70% 52% 48% / 60% 32% 68% 40%; transform: rotate(20deg); }
}
@media (prefers-reduced-motion: reduce) { .blob { animation: none; } }
</style>
<div class="blob"></div>Values before the slash are horizontal radii, after it vertical radii, each in the order top left, top right, bottom right, bottom left.
| Corner | Horizontal radius | Vertical radius |
|---|---|---|
| Top left | 42% | 45% |
| Top right | 58% | 45% |
| Bottom right | 70% | 55% |
| Bottom left | 30% | 55% |
The generator places points evenly around a circle, then moves each one inward or outward by a random amount controlled by the randomness slider. A smooth curve is threaded through the points with cubic Bezier segments so there are no sharp corners.
Fewer points and lower randomness give a pebble. More points and higher randomness give a splash or a cloud.
The CSS d property, which would let you morph an SVG path in a stylesheet, is not Baseline according to MDN, so it fails in some major browsers. That is why the animated option uses border-radius. Every corner radius is a length or percentage, so the browser can blend between keyframes on its own.
Adding a slow rotation alongside the radius change makes the motion feel more organic. Keep it gentle so it stays in the background.
border-radius accepts separate horizontal and vertical radii for each corner, written as four values, a slash, and four more. When the two radii meeting on each side add up to 100 percent, the corners merge into one smooth organic outline instead of a rounded rectangle.
Put two or more border-radius values in @keyframes and run the animation with ease-in-out, infinite and alternate. Browsers interpolate each corner radius, so the outline flows smoothly from one shape to the next. Turn on Animate in CSS mode to get ready-made keyframes.
Yes. The shape depends only on the settings and the seed number. Write down the seed, or keep the copied code, and the generator will rebuild that exact outline.
You can reference it with clip-path: url(#id) when the SVG sits in the same page, or paste the d attribute into clip-path: path() for a fixed pixel size. A mask-image with the .svg file is the easiest way to scale it with the element.
Related: Clip-path generator, SVG wave generator, CSS animation generator, SVG animation guide, Cubic bezier generator, Noise texture generator.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.