layout · css
Six ways to use a blob in a landing page
Behind a headline, as an image mask, a section divider, a card accent, a background cluster or a loading indicator, with markup and matching presets.
Published September 18, 2026
A blob on a landing page is doing one of about six jobs. Naming the job first makes the rest easy, because each one implies a different shape, a different size and a different way of putting it on the page. Here are the six, with a sketch of the markup and a preset that fits.
Two decisions run through all of them. The first is the node count: a shape with few nodes and a high Randomness value stays close to a circle and recedes, while a shape with many nodes and a low Randomness value has spikes and pulls the eye. Background work wants the first kind, accents want the second. The second decision is the format. Inline SVG when CSS or script has to reach the shape, an SVG file when the same blob repeats across pages and should be cached once, and a PNG only where the destination cannot read vectors at all. Everything below assumes an SVG unless it says otherwise.
1. Behind a headline
The most common use, and the one most often overdone. The shape adds a second plane behind the first screen so the headline has something to sit in front of. It should be large, calm and low in contrast, because anything else competes with the words.
Absolute positioning with a negative z-index keeps it out of the text’s way, and aria-hidden keeps it out of the accessibility tree.
<section class="hero">
<img class="hero__blob" src="/blobs/sunset-halo.svg" alt="" aria-hidden="true" />
<h1>Organic shapes for web and app design</h1>
<p>Generate, style, animate, export.</p>
</section>.hero {
position: relative;
isolation: isolate;
}
.hero__blob {
position: absolute;
z-index: -1;
top: -12%;
right: -8%;
width: min(60vw, 40rem);
opacity: 0.35;
pointer-events: none;
}Reach for a shape with a low node count and a high Randomness value, so the outline is close to circular and reads as a field rather than as an object. Sunset Halo and Blush Fade both work, and Warm Mist is the quietest of the three.
2. Image mask
A photograph clipped to a blob is the fastest way to make stock imagery look deliberate. Use an SVG clipPath with clipPathUnits="objectBoundingBox" so the clip scales with the element instead of demanding a 500-pixel box.
<svg width="0" height="0" aria-hidden="true">
<clipPath id="blob-mask" clipPathUnits="objectBoundingBox" transform="scale(0.002)">
<path d="M413,84.5Q476,169,447,249.5Q418,330,349,383Q280,436,204,412Q128,388,96,314Q64,240,105,169.5Q146,99,220,74.5Q294,50,353.5,67.25Q413,84.5,413,84.5Z" />
</clipPath>
</svg>
<img class="portrait" src="/team/photo.jpg" alt="" />.portrait {
width: clamp(14rem, 30vw, 24rem);
aspect-ratio: 1;
object-fit: cover;
clip-path: url(#blob-mask);
}The factor 0.002 is one divided by 500, which maps the path into the zero-to-one bounding-box space. Pick a mask with few nodes: detail at the edge disappears once a face is inside it, and a busy outline just eats the photograph. Blue Pebble and Rose Cushion are both built for this.
3. Section divider
Instead of a straight rule between two sections, let a wide blob sit across the seam and carry the background color of the section below it upward. The shape needs to be much wider than it is tall, which you get by stretching the viewBox rather than by picking a different blob.
<div class="divider" aria-hidden="true">
<svg viewBox="0 0 500 500" preserveAspectRatio="none">
<path fill="#ecf6ff" d="M413,84.5Q476,169,447,249.5Q418,330,349,383Q280,436,204,412Q128,388,96,314Q64,240,105,169.5Q146,99,220,74.5Q294,50,353.5,67.25Q413,84.5,413,84.5Z" />
</svg>
</div>.divider svg {
display: block;
width: 100%;
height: clamp(4rem, 10vw, 9rem);
}preserveAspectRatio="none" is what allows the squash. It distorts the shape, which is fine here because nobody reads a divider as an object. Zigzag Bay keeps its texture when flattened; Teal Lattice is the calmer option.
4. Card accent
A small blob in the corner of a card, usually behind an icon, is what gives a grid of otherwise identical cards some variety. The trick is to use the same shape at different rotations rather than a different shape per card, so the grid stays coherent.
<article class="card">
<span class="card__blob" aria-hidden="true"></span>
<h3>Export formats</h3>
<p>SVG, PNG, CSS, React and Flutter, from the same shape.</p>
</article>.card {
position: relative;
overflow: hidden;
border-radius: 1.25rem;
}
.card__blob {
position: absolute;
top: -2rem;
right: -2rem;
width: 9rem;
aspect-ratio: 1;
background: url("/blobs/amber-pebble.svg") center / contain no-repeat;
opacity: 0.18;
}
.card:nth-child(2n) .card__blob {
transform: rotate(120deg);
}
.card:nth-child(3n) .card__blob {
transform: rotate(240deg);
}Small blobs want a high Randomness value, because a spiky outline at 140 pixels just reads as noise. Amber Pebble and Violet Stone hold their shape at that size.
5. Background cluster
Three or four blobs scattered across a whole section, all heavily transparent, give a page atmosphere without an image request. The rules that keep it from turning to mush: no more than four shapes, all from the same color family, all at different sizes, and none of them overlapping the text column.
<section class="showcase">
<div class="showcase__field" aria-hidden="true">
<img src="/blobs/violet-bloom.svg" alt="" style="--x: 8%; --y: 12%; --s: 22rem" />
<img src="/blobs/twilight-pool.svg" alt="" style="--x: 68%; --y: 44%; --s: 30rem" />
<img src="/blobs/cyan-stone.svg" alt="" style="--x: 34%; --y: 78%; --s: 16rem" />
</div>
<!-- content -->
</section>.showcase__field {
position: absolute;
inset: 0;
z-index: -1;
overflow: hidden;
filter: blur(40px);
opacity: 0.4;
}
.showcase__field img {
position: absolute;
left: var(--x);
top: var(--y);
width: var(--s);
}One warning about that filter: blur(). It is cheap on a static image and expensive on a moving one, so if you later animate any shape in the cluster, drop the blur first. Violet Bloom, Twilight Pool and Cyan Stone are a matched set.
6. Loading indicator
The one place on a landing page where a blob should move. An outlined shape morphing slowly between three frames reads as activity without the mechanical feel of a spinner, and at 48 pixels it costs almost nothing to draw.
<div class="loader" role="status" aria-label="Loading">
<svg viewBox="0 0 500 500" width="48" height="48" aria-hidden="true">
<path
fill="none"
stroke="#344f5c"
stroke-width="28"
d="M413,84.5Q476,169,447,249.5Q418,330,349,383Q280,436,204,412Q128,388,96,314Q64,240,105,169.5Q146,99,220,74.5Q294,50,353.5,67.25Q413,84.5,413,84.5Z" />
</svg>
</div>Give the path a morph loop from the animated blob generator and keep the duration short, around two to four seconds, because here the movement is the message rather than the ambience. Two things are not optional: a role="status" with a label so the state is announced, and a prefers-reduced-motion fallback that leaves a still shape. Quiet Outline and Green Halo are sized for this.
Three things that apply to all six
Mark it as decoration. Empty alt on an image, aria-hidden on inline SVG. A screen reader has nothing useful to say about a blob.
Keep it out of the click path. pointer-events: none on any shape that overlaps interactive content, or a negative z-index and a positioning context on the parent.
Reserve the space. Give the shape an aspect-ratio and a width so it cannot shift the layout when it arrives. Blobs are small files, but small is not instant.
Use fewer than you want to. The failure mode on every one of these patterns is the same: two blobs become five, the opacity creeps up, and the page turns into wallpaper that the content has to fight. One large shape per screen is usually the right number, and the cluster in pattern five is the only case where more than two belong in the same viewport.
Pick the colors from the page, not from the tool. A blob in a color the rest of the layout does not use reads as an imported asset. Take the section’s own tint or a lighter step of the brand color, and lower the opacity until the shape sits behind the text rather than next to it.
Every shape in this article is a preset in the gallery with SVG and PNG downloads and a link that opens it in the generator, so you can change the color to match your page before you export anything.