Color fields that fill a whole screen.

In depth

How a blurred canvas is built.

From shapes to a color field

At a blur of 0 this is a composition: several blobs on a canvas, each one readable, overlapping where they happen to. Raise the blur and something changes in kind rather than in degree. The outlines stop being edges and start being gradients, the overlaps become new colors rather than stacked shapes, and the eye reads the result as one surface. It is also why Complexity and Randomness matter less here than on the main generator: once an outline is soft, its node count is invisible.

What survives the blur is position and area. A blob in the top-left corner still puts its color there, and a large blob still dominates, so the useful controls at high blur are the blob count, the seed that scatters them, and the palette. Two blobs give a diagonal wash. Four give a background with a center of gravity and a couple of quieter corners. Six average out into one muddy tone unless the palette is tight.

Blur also eats the edges of the canvas: a blob near the border spreads past it, and the area it leaves behind falls back to the canvas color. That is why the canvas color is the most consequential setting on the panel. At a heavy blur it is not a background behind the blobs, it is a fifth color, and often the one covering the most area.

Blur radius against canvas size

Blur is set in canvas units, not final pixels, so the same value gives the same look whatever size you export at. The filter scales with the document, and a canvas that looks right in the preview looks right at 2048 pixels and at 400. It 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, while the same 30 on a tall 9:16 canvas covers far more of the narrow axis.

As a rule of thumb, start at about a quarter of the short edge. Below 15 the shapes stay legible and the result reads as a pattern rather than a background. Between 25 and 45 is where most hero backgrounds live: the colors blend but the composition is still visible. Above 60 the canvas becomes an almost flat wash, which is right behind dense text and wrong if the background should be noticed.

Two practical limits. A heavy blur on a small canvas leaves very little to look at, so for a narrow card use fewer blobs and less blur rather than shrinking a hero canvas. And an SVG filter is recomputed when the element resizes, so a full-bleed blurred canvas that changes size on every scroll costs more than one at a fixed height.

Palettes that survive blending

Blurred colors mix, and not every pair mixes well. Two colors close together on the wheel, such as a blue and a cyan, blend into more of the same and give a calm, coherent field. Two colors opposite each other, such as an orange and a blue, blend through gray in the middle, which 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 rather than an opposite.

Keep saturation and lightness closer than you would in a flat design, because a vivid color beside a pale one produces an overlap that belongs to neither. Three colors is the practical maximum for most canvases. The palette is assigned to the blobs in turn, so three colors over five blobs repeats the first two, which is a quick way to give one hue more weight.

Dark canvases behave differently. Over a near-black canvas the blobs read as light rather than as paint, and colors that look garish on white look like glow on black. Lower the blob count, raise the blur, and let large areas stay dark. A dark field is far more forgiving of a wide palette than a light one.

Text on top, and which file to ship

A background exists to be looked past. Once the canvas is settled, put the real headline over it at the real size and check the worst point rather than the average: the lightest patch under white text, the darkest under black. WCAG asks for a contrast ratio of at least 4.5 to 1 for body text and 3 to 1 for large text, and a blurred canvas can swing across that line from one corner to another. The cheapest fix is a flat semi-transparent overlay at ten to twenty percent, which lifts the whole field without touching the colors.

For the file itself, prefer the SVG. The whole canvas is a handful of paths and one filter, a few kilobytes at any size, against a PNG that has to be exported at every size you need and runs to hundreds of kilobytes once it covers a screen. The SVG also stays editable: a palette swap is a color attribute, not a re-export.

Take the PNG when the destination cannot render an SVG filter or will not load SVG at all: slide decks, email, social preview images. Export at 2048 on the long edge for anything full-screen and 1024 for a card. Whichever you ship, mark it as decoration with an empty alt or aria-hidden, and never put text inside the background file itself.