How to landing page blob background design: svg trends for 2026
- Step 1Generate two or three shapes for the section — In the Blob Generator, generate a few shapes at Points 6–8 and capture the ones you like (no seed — save them immediately). Pick base colours close to your brand. You will soften and recolour them in CSS next.
- Step 2Drop opacity hard — The blob exports at full solid fill. For a background, set the element
opacityto roughly 0.12–0.25 in CSS. The generator has no opacity option, so this step is mandatory — full-strength blobs over text look garish and crush contrast. - Step 3Add blur for the colour-cloud effect — Apply
filter: blur(60px)(commonly 60–120px) to the blob element. Big blobs at high blur become abstract washes; smaller blobs at low blur stay as defined accents. Blur is a CSS property — the SVG contains no filter. - Step 4Oversize and position asymmetrically — Make each blob 2–3× the section size so its edges run off-screen, then place one upper-left and one lower-right. The viewBox scaling means you resize via CSS
width/heightwithout regenerating. - Step 5Layer behind content safely — Set
position: absolute; z-index: 0; pointer-events: noneon the blobs andz-index: 1on the content.pointer-events: noneensures the decorative shapes never intercept clicks. - Step 6Check contrast and motion — Verify body text still clears WCAG AA (4.5:1) over the blob colours — low opacity usually handles this. If the blobs animate, gate the motion behind
prefers-reduced-motion.
Generator option vs CSS treatment
The single biggest source of confusion. The generator gives you a shape and a base colour; everything that makes it 'background-y' is CSS.
| Effect | Comes from | How |
|---|---|---|
| Shape / waviness | Generator | Points slider (3–10) |
| Base fill colour | Generator | Color picker (solid) |
| Low opacity | CSS | opacity: 0.15 on the element |
| Soft edges / colour cloud | CSS | filter: blur(60–120px) |
| Gradient fill | CSS / hand-edit SVG | add <linearGradient> in <defs>, fill="url(#id)" |
| Overlap blending | CSS | mix-blend-mode + stacking two blobs |
Practical layout values
Starting points used by polished SaaS heroes. Tune to your palette and section height.
| Decision | Typical value | Why |
|---|---|---|
| Blobs per section | 2–3 max | More competes with content and reads as noise |
| Opacity | 0.12–0.25 | Visible but never reduces text contrast below AA |
| Blur | 60–120px | Turns the hard shape into a diffuse wash |
| Size vs section | 200–300% | Edges fall off-screen so it never looks like a sticker |
| Placement | Upper-left + lower-right | Asymmetry feels organic; the overlap implies a third tone |
Cookbook
Real CSS for the looks people ask for. The blob markup comes from the generator (one solid-fill path); the treatment is the CSS around it. Replace the M… with your captured path data.
The classic soft hero wash (two blobs)
Two oversized, blurred, low-opacity blobs on the diagonal. None of these qualities exist in the SVG — they are all CSS.
.hero { position: relative; overflow: hidden; }
.blob { position: absolute; z-index: 0; pointer-events: none;
width: 70%; opacity: 0.2; filter: blur(80px); }
.blob-1 { top: -20%; left: -10%; }
.blob-2 { bottom: -25%; right: -10%; }
.hero > .content { position: relative; z-index: 1; }
<div class="hero">
<svg class="blob blob-1" viewBox="0 0 400 400"><path d="M…" fill="#8b5cf6"/></svg>
<svg class="blob blob-2" viewBox="0 0 400 400"><path d="M…" fill="#ec4899"/></svg>
<div class="content">…</div>
</div>Gradient blob (the 2026 look)
The generator only writes solid fill. Add a gradient by hand for the richer one-blob-two-colours effect that reads better than flat colour at the same opacity.
<svg class="blob" viewBox="0 0 400 400">
<defs>
<linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#8b5cf6"/>
<stop offset="100%" stop-color="#ec4899"/>
</linearGradient>
</defs>
<path d="M…" fill="url(#g)"/>
</svg>Overlap blending for an implied third colour
Place two blobs so they overlap and let mix-blend-mode create a new tone in the intersection — depth with only two colours.
.blob { mix-blend-mode: multiply; opacity: 0.35; filter: blur(40px); }
.blob-1 { background: none; } /* colour is in the SVG fill */
/* stack two blobs whose bounding areas overlap ~30% */Crisp accent (no blur)
Not every blob is a soft wash. A defined, low-blur blob behind a feature card works as a graphic accent. Keep opacity higher when it is the focal shape.
.feature-blob {
position: absolute; z-index: 0; pointer-events: none;
width: 140%; top: -20%; right: -30%;
opacity: 0.9; /* a crisp accent, not a wash */
filter: none;
}Tile a blob-derived texture across a band
For a repeating organic texture rather than a single shape, take a generated blob and feed it into svg-pattern-tiler to build a seamless background-image.
/* 1. Generate a small blob */
/* 2. Paste it into /svg-tools/svg-pattern-tiler */
/* 3. Set tile size / spacing → seamless <pattern> */
.section-band {
background-image: url('data:image/svg+xml,…tiled…');
}Edge cases and what actually happens
Expecting the blob to look soft straight out of the tool
By designThe export is a hard-edged, full-opacity solid shape. The dreamy SaaS look is entirely CSS: low opacity plus filter: blur(). If your blob looks like a flat sticker, you have not applied the treatment — the generator never adds it.
Blob colour crushes text contrast
accessibility failA full-strength blob behind body text can drop contrast below WCAG AA. Set opacity to roughly 0.12–0.25 and re-check text over the darkest part of the blob (4.5:1 for body copy). Low opacity is the fix — the generator has no opacity control, so this is on your CSS.
Wanting a gradient blob from the tool
By designThe generator writes a single solid fill. The gradient look requires hand-adding a <defs> <linearGradient> and changing fill to url(#id) (cookbook recipe two). It will never emit a <defs> block on its own.
Lost the exact hero shape after a reload
failNo seed means you cannot recover a previous random blob. Once a shape is right for the hero, copy or download it immediately and commit it. Treat the saved SVG as the source of truth, not the generator settings.
Too many blobs in one section
visual noiseBeyond two or three blobs per section, the background starts to fight the content. For long pages, vary placement and colour per section rather than stacking more shapes into one. Restraint is the whole aesthetic.
Blob intercepts clicks on the content
interaction bugAn absolutely-positioned blob over interactive content will swallow clicks unless you set pointer-events: none. Always add it to decorative blob elements and keep content at a higher z-index.
Large blurred blob causes scroll jank
performance riskVery large filter: blur() regions can trigger expensive repaints during scroll on weaker GPUs. Promote the blob to its own compositor layer with will-change: transform (or transform: translateZ(0)) and test on a mid-range phone. See the performance reference.
Blob looks like a sticker, not a background
design smellIf the whole blob is visible inside the section, it reads as a pasted graphic. Oversize it (200–300% of the section) and position it so its edges run off-screen. The viewBox scales, so resize in CSS without regenerating.
Animated blob ignores reduced-motion
accessibility failIf the background blobs drift or morph, wrap the animation in @media (prefers-reduced-motion: reduce) and disable it, keeping the static blob visible. Removing the blob entirely can shift the layout for those users.
Three-point blob used as a hero background
ExpectedAt Points 3 the shape reads as a softened triangle, which looks more like a deliberate geometric accent than an organic wash. For background blobs, generate at Points 6–8 so the silhouette is recognisably blobby.
Frequently asked questions
Should blob backgrounds be SVG files or CSS gradients?
For a truly organic silhouette, use the SVG path — radial-gradient only gives you circles/ellipses. The richest result is an SVG blob with a CSS filter: blur() applied: you keep exact shape control and add softness. The generator supplies the path; you add blur and opacity in CSS.
Why does my blob look like a hard sticker?
Because you have the raw output and no treatment. The generator emits a full-opacity solid shape. Apply opacity: 0.15–0.25 and filter: blur(60–120px) in CSS to turn it into the soft colour cloud you see on polished sites. Neither effect lives in the SVG.
How do I get the gradient-filled blob look?
Hand-edit the SVG: add a <defs> block with a <linearGradient> and set the path's fill to url(#id) (there is a snippet in the cookbook). The generator only writes a solid colour, so the gradient is always something you add afterward.
How many blobs should one section have?
Two to three at most. More than three competes with the content and reads as noise. On a long landing page, vary the blob colours and positions section by section instead of crowding one section with extra shapes.
What opacity and blur should I start with?
Opacity 0.12–0.25 and blur 60–120px are reliable starting points for a background wash. Higher opacity with no blur turns a blob into a crisp graphic accent — also valid, just a different role. Both are CSS on the element, not generator options.
Do blob backgrounds hurt page performance?
The SVG itself is tiny (well under 1 KB). The cost is filter: blur() paint area — very large blurred blobs can repaint on scroll on weaker GPUs. Promote them with will-change: transform and test on a mid-range device. The full breakdown is in the performance reference.
What colours work best for blob backgrounds?
Desaturated or pastel versions of your brand colours, kept at low opacity. Highly saturated blobs at high opacity are hard to read over. The 2026 trend is gradient-filled blobs (e.g. purple→pink), which feel richer than flat colour at the same opacity — add the gradient by hand since the tool does not.
How big should a background blob be?
Two to three times the section size so its edges fall off-screen. A fully-visible blob looks like a sticker. Because the output uses a viewBox, scale it with CSS width/height — you never regenerate to resize, only to change the shape.
How do I stop the blob from blocking clicks?
Set pointer-events: none on every decorative blob element and keep your content at a higher z-index. Without it, an absolutely-positioned blob layered over buttons or links will intercept the clicks.
Can I reuse the same blob shape across pages?
Yes — save the SVG and import it everywhere. You must save it, because there is no seed: you cannot regenerate the same shape from settings. To recolour the saved blob per page without changing its shape, use svg-hex-swapper.
Can I make a repeating organic texture instead of one blob?
Yes. Generate a small blob and feed it into svg-pattern-tiler to build a seamless <pattern> for a textured band. For an inline CSS background from a single blob, run it through svg-css-data-uri.
Should I animate the blobs on a landing page?
Optional, and use restraint. A slow drift (CSS transforms) is cheap and pleasant; morphing is heavier and best limited to one hero accent. Whatever you choose, gate it behind prefers-reduced-motion. See the animation techniques guide.
Privacy first
Every JAD SVG tool runs entirely in your browser using the DOM API and Canvas. Your SVG files never leave your device — verified by zero outbound network requests during processing.