BgImageAll tools
Cut out and drawn on your machine.

Make a noise background

A base colour and a deterministic grain layer whose size, blend, opacity and seed remain visible.

monochrome noise at 9 per cent, over a white ground. 1920 × 1080 pixels.

1920 × 108016:9 · 2.1 MP · desktop screen

No picture goes in. This is the size that comes out.

File format

Try it behind something

Drawn over the preview and never into it. No file this page writes has ever contained the sample.

Set the size in millimetres or inches
Unit

A physical size is a claim about paper, so it needs the resolution beside it. At 300 DPI this canvas prints 162.6 by 91.4 millimetres.

1920 × 1080 · 2.1 megapixels

The CSS

Nothing in this stack has a CSS form: grain and waves are drawn only into the file. A declaration that quietly dropped them would not be the design on the canvas.

The file

1920 × 1080 · PNG

Drawn by the same renderer as the preview, at the dimensions above rather than the preview’s. The sample content is not in it.

Noise layer 1 is grain, and grain has no vector form. Remove it (or save a PNG) to get an SVG.

The recipe

A small JSON file holding the design and the numbers that decide what comes out of it: 1920 × 1080, PNG, 300 DPI, plus a fingerprint of the design drawn small so a later build can tell whether it still draws the same. The link in the address bar carries the design, the size and the format.

Recipe format version 2, renderer 2.0.0. A file written by a newer version is refused by name rather than half-applied, and the canvas is left as it was.

The stack opens with a single monochrome noise layer over warm paper. It is a live layer, not a baked texture.

Every size at once, read where its text goes

Each size is drawn at its own pixels by the export renderer, then opened again and read inside its own text zone — the clock on a phone, the title down the left of a link card, the safe area of a channel banner. The same ramp can carry white text on one and lose it on the next; the row says which.

Sizes · 6 of 12

Add a size of your own, with a named text zone
Text on top
Contrast to hold

  • Desktop screen 1920 × 1080

    Text zone: centred headline

    Waiting.

  • Four-K screen 3840 × 2160

    Text zone: centred headline

    Waiting.

  • Ultrawide screen 3440 × 1440

    Text zone: the middle third, where the eye rests

    Waiting.

  • Phone screen 1080 × 1920

    Text zone: lock-screen clock

    Waiting.

  • Link preview card 1200 × 630

    Text zone: title down the left

    Waiting.

  • Profile banner 1500 × 500

    Text zone: right of the avatar

    Waiting.

Held means the ratio holds against 95 per cent of the zone’s pixels; the worst pixel is shown beside it so grain and hard edges are not hidden. White text is pure white (255, 255, 255), black is pure black (0, 0, 0), and the scrim is a flat layer of the opposite colour behind the text. The archive also holds contrast-report.txt and text-contrast.csv with every number here.

Noise buys texture by spending compressibility

A flat colour is almost free to describe because every pixel repeats. Grain makes those pixels differ on purpose. It can hide gradient banding, stop a large field feeling sterile and make type sit on something that resembles a surface, but every one of those differences has to be stored in the exported file.

The decisions in the opening layer
ControlOpeningWhat it changes
KindMonochromeLightness without coloured speckle
Grain1 pxThe spatial size of each sample
Opacity9%How much the layer moves the base
BlendSoft lightHow light and dark noise mix
Seed314159Which repeatable field is drawn

When a texture is doing too much

  1. If body text becomes harder to read, lower opacity before making the grain smaller; fine high-contrast noise competes with letter edges.
  2. If a background must be tiny, keep a flat or simple gradient version. Noise can multiply file size even when the visual change is slight.
  3. A seeded procedural surface is not scanned paper. It has no fibres, direction or physical scale unless those are constructed separately.

Questions about the surface

Why does noise make the file larger?
Compression works by describing repeated or predictable regions. Noise deliberately makes neighbouring pixels differ, so PNG, JPEG and WebP need more data to describe the same dimensions.
What does the seed change?
It chooses the repeatable sequence of pseudo-random values. The same seed, size and grain settings reproduce the same surface instead of changing whenever the page redraws.
Should noise be coloured?
Usually not for a paper-like surface. Monochrome noise changes lightness without making red, green and blue speckles. Colour noise is useful when the chromatic texture itself is intended.

Other background constructions

Three backgrounds from the library: Slate ramp, Dawn edge, Amber corner.

Backgrounds made here: Slate ramp · Dawn edge · Amber corner