SVG Blob Shapes Explained: How to Add Organic Backgrounds to Any Website

The soft, irregular, organic shape sitting behind a hero image, a testimonial card, or a pricing table on a huge share of modern websites has a name — a "blob" — and it's become common enough that it's easy to assume it's either hand-drawn in a design tool or a stock decorative asset. It's neither, usually: it's a small piece of generated math, turned into an SVG path, and the specifics of how that generation works are exactly what let you get a blob that fits your actual design instead of a generic downloaded shape that looks the same as everyone else's. This covers how blob generation actually works, the difference between an SVG-path blob and a CSS border-radius blob, where each is the better choice, and how to animate one without it looking like a lava lamp.

How a blob shape is actually generated

A blob generator works by placing a set number of points evenly around a circle, then randomly (or semi-randomly) displacing each point's distance from the centre by some amount, and finally connecting those displaced points with a smooth curve — usually cubic Bézier segments — instead of straight lines, which is what turns a jagged polygon into the smooth, organic outline a blob is recognised by. Two parameters do almost all the visual work: the number of points (more points means more, smaller bumps and a more complex, detailed outline; fewer points means broader, simpler waves) and the amount of random displacement (a small amount produces a subtle, gentle wobble close to a circle; a large amount produces a much more dramatic, irregular shape). Understanding these two levers is what turns "generate a random blob and hope it looks right" into deliberately dialling in a shape that matches the rest of a design's visual weight.

SVG path blobs vs CSS border-radius blobs

There are genuinely two different techniques that both produce something describable as a "blob," and they're not interchangeable. An SVG path blob is a real vector shape defined by an actual path of curve points — it can be arbitrarily irregular, asymmetric, and detailed, exported as a standalone `.svg` file or inlined directly in HTML, and it composites like any other image or vector graphic (as a background, a mask, a decorative element behind or around other content). A CSS border-radius blob, covered in more depth in our border-radius guide, instead uses border-radius's elliptical slash syntax to give each of an element's four corners a different horizontal and vertical radius, producing an organic-looking outline on an actual HTML element with zero extra markup or asset — but it's fundamentally limited to a shape describable by four corner ellipses, which caps how irregular or detailed it can get compared to a true SVG path with many independently-placed points.

When to reach for which

A CSS border-radius blob is the better choice when the "blob" needs to be an actual interactive or content-bearing element — a card, a button, a container that holds text or an image — since it's a real HTML element with normal layout behaviour, not an image sitting behind or around other content. It's also the simpler, lighter-weight choice for a design that only needs a mild, subtle organic wobble rather than a dramatically irregular shape. An SVG path blob is the better choice for a purely decorative background shape — sitting behind a hero section, peeking out from a card's corner, filling empty space in a layout — where the shape itself carries no content and can be as irregular and detailed as the design calls for, independent of any actual HTML element's box shape.

Where blob shapes actually work in a design

• Behind a hero section's headline or product image, adding visual softness and depth without competing with the actual content sitting on top.
• As a subtle background accent behind a testimonial, quote, or feature card — placed off-centre or partially behind the card's edge rather than perfectly centred, which reads as more natural and less templated.
• Filling awkward empty space in an asymmetric layout, where a hard rectangular placeholder would look unfinished but a soft organic shape reads as intentional.
• As a mask or clip-path shape for a photo, giving an otherwise ordinary rectangular image a distinctive, non-generic outline.
• Layered in pairs or small groups at different sizes and opacities behind a section, for a soft, atmospheric background effect rather than one flat shape.

Where blob shapes work against a design

Overuse is the most common way a genuinely nice design element becomes a tired one — a blob shape behind every single section of a page reads as decoration for its own sake rather than a deliberate accent, and a page that leans on the exact same blob shape repeated at the same size across multiple sections looks templated rather than designed. A blob is also the wrong choice directly behind dense body text or a data table, where its irregular edges can reduce readability or simply look chaotic against structured content that wants a calm, predictable background. Used sparingly — one or two per page, sized and positioned deliberately rather than defaulted to a generator's random output — is what keeps a blob reading as a considered design choice rather than a generic template flourish.

Color and layering

A blob rarely works well as a single, fully-opaque, high-contrast shape competing directly with foreground content — the more common, more effective pattern is a soft, low-opacity fill (often a brand color at 5-15% opacity, or a subtle gradient) sitting clearly behind the content it accompanies, reading as atmosphere rather than a competing visual element. Layering two or three blob shapes of different sizes, slightly offset and at different opacities, tends to produce a more organic, less "stamped-on" result than a single flat shape — this is the same layering principle used in a lot of soft, ambient background design more broadly, applied specifically to blob outlines.

Animating a blob shape

An SVG path blob can be animated by interpolating between two or more different sets of path coordinates — typically using a library or a manually authored keyframe animation that smoothly morphs from one blob shape into another and back, producing the slow, organic "breathing" or "morphing" effect seen on some hero backgrounds. This is worth using sparingly and slowly — a fast or high-amplitude morph reads as distracting or even slightly nauseating rather than ambient, and `prefers-reduced-motion` should genuinely be respected for this specific effect, disabling or significantly slowing the animation for users who've indicated a preference for reduced motion, since a large, slowly-shifting shape is exactly the kind of motion that can be uncomfortable for motion-sensitive users if left unchecked.

Using a blob shape as an image mask or clip-path

Beyond sitting as a decorative background, a blob's path can also be used as a `clip-path` value directly on an `<img>` or any element with a background image, clipping that content to the blob's irregular outline instead of the usual rectangle. This is a genuinely effective way to give an otherwise ordinary photo a distinctive, non-generic silhouette — a headshot, a product photo, or a testimonial avatar clipped to a soft organic outline instead of the near-universal circle or rounded rectangle reads as considerably more distinctive. The main practical caveat is that clip-path-based clipping (as opposed to a blob merely sitting behind an image) removes whatever part of the image falls outside the blob's outline entirely, so the source image needs enough usable margin around its actual subject for the clip to not awkwardly cut into something important.

Reproducibility — why a blob generator's seed value matters

A blob generator that produces a genuinely new random shape every time you reload it is fine for casual experimentation, but it creates a real problem the moment you actually like a specific result and want to reproduce or slightly adjust it later — without some way to reproduce the exact same random displacement, that specific shape is gone the moment you refresh or reopen the tool. Tools that expose the underlying seed value (the number that initialised the random generation) let you return to the exact same shape deterministically, or make one small parameter change (say, point count) while keeping everything else about that specific shape's character consistent, rather than generating an entirely new, unrelated blob. If you land on a blob shape you like, copying its underlying path data (or noting its seed, where exposed) immediately is worth doing before navigating away, since "regenerate until it looks similar" is a much less reliable way to recover a specific shape than it might seem.

Performance: an SVG blob vs a background image

A generated SVG blob, whether inlined directly in the HTML or referenced as a separate `.svg` file, is almost always dramatically lighter than the equivalent effect achieved with a rasterised PNG or JPEG background image — an SVG path is fundamentally just a short list of coordinate numbers, typically a few hundred bytes to a few kilobytes even for a fairly detailed shape, versus tens or hundreds of kilobytes for a rasterised image covering the same visual area. SVG also scales to any size or screen resolution with zero quality loss and no extra file weight, unlike a raster image, which needs a higher-resolution source to avoid looking soft on a high-density display. For a purely decorative background element specifically, there's essentially no performance argument for a raster image over a generated SVG path — the only case where a raster approach makes sense is a genuinely photographic or textured effect that a flat vector shape can't represent at all.

Optimising an exported blob SVG

A blob shape exported from a generator can carry more precision in its path coordinates than a rendered shape actually needs — path values with many decimal places add real file size without any visible difference once rendered, which matters more than it might seem for a decorative element that should be cheap to load. Running the exported SVG through an SVG optimizer before using it in production — rounding coordinate precision, stripping unnecessary metadata and editor-specific attributes — is a quick, worthwhile step, particularly if a page uses several blob shapes at once, since their combined weight can otherwise add up more than expected for what's ultimately a decorative background element.

Common mistakes

• Using the exact same generated blob shape, unmodified, across every section of a page — regenerating or resizing the shape per placement reads as far more deliberate.
• Placing a high-contrast, fully-opaque blob directly behind body text or data, hurting readability instead of adding atmosphere.
• Skipping SVG optimization on an exported blob path, leaving unnecessary coordinate precision and metadata that adds file weight for no visual benefit.
• Animating a blob's morph too quickly or with too much amplitude, producing a distracting effect instead of a subtle ambient one — and forgetting to respect prefers-reduced-motion.
• Reaching for a full SVG path blob when a CSS border-radius blob would have been simpler and sufficient for an actual content-bearing element like a card or button.

The short version: a blob shape is generated by displacing points around a circle by a random amount and connecting them with a smooth curve — more points and more displacement produce a more complex, dramatic shape. Use an SVG path blob for a purely decorative background element that can be as irregular as the design calls for; use CSS border-radius for an actual content-bearing element that needs an organic-feeling outline. Keep the color low-opacity and the placement deliberate rather than centred and repeated, and optimise the exported SVG before shipping it, since decorative weight is still weight a page has to load.

The distinguishing habit between a blob that reads as generic filler and one that reads as a deliberate design choice usually comes down to restraint — resisting the urge to add one to every section, taking the extra minute to reposition or resize a generated shape rather than dropping it in at default settings, and treating it as an accent that supports the actual content rather than a decoration competing with it.