design · color

Backgrounds made of blurred blobs

Turning scattered blobs into a soft color field: palettes that survive blending, blur radius against canvas size, readable text, and SVG versus PNG.

Published September 18, 2026

Put four blobs on a canvas and you have a composition. Blur them hard enough and you have something else: a field of color with no shape you can name, which is what most product pages are using behind their first screen.

The change is not gradual. Somewhere past a quarter of the canvas’s short edge the outlines stop being edges and start being gradients, the overlaps become new colors rather than stacked shapes, and the eye reads one surface instead of several objects.

What survives the blur

Not much of the shape does. Once an outline is soft its node count is invisible, which is why Complexity and Randomness matter far less in the background generator than they do elsewhere. What survives is position and area: a blob in the top-left corner still puts its color there, and a large blob still dominates.

So the controls that shape the result are the blob count, the seed that scatters them, the palette, and the canvas color behind them.

• Two blobs give a diagonal wash from one color to another. Calm, and hard to get wrong.
• Four blobs give a background with a center of gravity and a couple of quieter corners. This is the usual answer for a hero.
• Six blobs average out into a single tone unless the palette is tight. If a six-blob canvas looks muddy, that is why.

The canvas color deserves more attention than it usually gets. Blur pushes color past the borders of the canvas and leaves the edges to fall back on whatever is behind, so at a heavy blur the canvas color is not a background, it is an extra color in the palette, and often the one covering the most area.

Blur radius against canvas size

Blur is set in canvas units rather than final pixels, so the same value produces the same look at any export size. The filter scales with the document: a canvas that reads well in the preview reads the same at 400 pixels and at 2048.

That also means the number has to be read against the frame. A blur of 30 on a wide 16:9 canvas is a soft edge. The same 30 on a tall 9:16 canvas covers far more of the narrow axis and pushes the whole thing toward one tone.

A workable scale, relative to the short edge:

Start at about a quarter of the short edge. Two limits are worth knowing: a heavy blur on a small canvas leaves very little to look at, so for a narrow card use fewer blobs rather than shrinking a hero canvas down; and a filter is recomputed when its element resizes, so a full-bleed canvas that changes size on every scroll costs more than one at a fixed height.

Palettes that survive blending

Blurred colors mix, and the mixing is where palettes fail.

Two hues that sit near each other, a blue and a cyan, blend into more of the same: coherent, quiet, hard to ruin. Two hues opposite each other, an orange and a blue, blend through gray in the middle, and gray between two saturated colors reads as dirt rather than as depth. If you want a wide hue range, get there through a third color that sits between the other two, so every overlap has a neighbour instead of an opposite.

Blue → cyan → violet     one family, deepening
Amber → rose → violet    a sunset, in order around the wheel
Green → cyan → blue      cool, coherent, calm

Keep saturation and lightness closer than you would in a flat design. A vivid color next to a pale one produces an overlap belonging to neither, and the pale one usually vanishes. Three colors is the practical maximum for most canvases; add a fourth only when the canvas is large and the blobs are far enough apart for each color to own a region.

The palette is assigned to the blobs in turn, which is a useful lever: three colors over five blobs repeats the first two, giving those hues more weight without touching the palette itself.

Dark canvases

Over a near-black canvas the blobs stop reading as paint and start reading as light. Colors that look garish on white look like glow on black, and the whole thing becomes much more forgiving of a wide palette.

Use fewer blobs, because each one is doing more work; raise the blur, because a hard-edged bright shape on black reads as an object rather than as light; and let large areas stay dark, since the unlit space is what makes the lit space look lit.

Canvas #111827, palette #ef629f + #f59e0b, three blobs, blur 60
Canvas #0b1a2b, palette #7c5cff + #ef629f + #01b1cf, six blobs, blur 45

Both take white text without an overlay, which is rarely true of a light canvas.

Keeping the text readable

A background exists to be looked past, and a blurred canvas is much less uniform than it feels. The lightest patch and the darkest patch can sit two or three stops apart, and your headline only has to fail in one place to fail.

So check the worst point, not the average. Put the real headline over it at the real size, find the lightest patch under white text and the darkest under black, and measure there. WCAG asks for a contrast ratio of at least 4.5 to 1 for body text and 3 to 1 for large text.

When it does not hold, the cheapest fix is a flat overlay between the canvas and the text:

<section class="hero">
  <img class="hero__bg" src="/background.svg" alt="" />
  <div class="hero__body">
    <h1>Field notes</h1>
  </div>
</section>

.hero {
  position: relative;
  isolation: isolate;
}

.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 0.18);
  z-index: -1;
}

Eighteen percent black lifts the whole field without touching the relationships between the colors. Raising the blur does the same job more slowly and flattens the design along the way. A gradient overlay that is opaque only behind the text is the more careful version of the same idea.

Note the empty alt. The canvas carries no information, so it should not announce itself; inline markup gets aria-hidden="true" instead.

SVG or PNG

Prefer the SVG. The whole canvas is a handful of paths and one Gaussian filter, a few kilobytes whatever size it is shown at, against a PNG that has to be exported for every size you need and runs into hundreds of kilobytes once it covers a screen. The SVG also stays editable: a palette change is a fill attribute, not a re-export.

Use it inline when the colors should follow a theme, or as a background-image when it is fixed decoration:

.hero {
  background-image: url("/background.svg");
  background-size: cover;
  background-position: center;
}

Take the PNG when the destination cannot render a filtered SVG or will not load SVG at all: slide decks, email, social preview images. Export at 2048 pixels on the long edge for anything full-screen and 1024 for a card or a square post.

Whichever you ship, build it at the right proportions in the first place. A background composed at 16:9 and then cropped to 9:16 loses its balance, because the blob that anchored the corner is now outside the frame. Pick the aspect ratio first, then arrange.

Related

• Blob background generator
• Eight gradient blob color pairs
• Six ways to use a blob in a landing page
• Gradient blob generator