BgImage
Upload a picture
Cut out and drawn on your machine.

SVG background image for a website

A gradient or pattern background written as a small vector file. It stays sharp at any size, and the page says plainly where the vector differs from the canvas.

pale indigo grid every 40 pixels, over a indigo 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

Exact construction · 852 B of CSS

background-color: rgb(17 61 112); /* sRGB fallback */
background-image: repeating-linear-gradient(90deg, rgb(199 226 246 / 0.3) 0px, rgb(199 226 246 / 0.3) 2.4px, rgb(199 226 246 / 0) 2.4px, rgb(199 226 246 / 0) 40px),
                  repeating-linear-gradient(180deg, rgb(199 226 246 / 0.3) 0px, rgb(199 226 246 / 0.3) 2.4px, rgb(199 226 246 / 0) 2.4px, rgb(199 226 246 / 0) 40px); /* sRGB fallback */
background-color: oklch(0.36 0.1 255);
background-image: repeating-linear-gradient(90deg, oklch(0.9 0.04 240 / 0.3) 0px, oklch(0.9 0.04 240 / 0.3) 2.4px, oklch(0.9 0.04 240 / 0) 2.4px, oklch(0.9 0.04 240 / 0) 40px),
                  repeating-linear-gradient(180deg, oklch(0.9 0.04 240 / 0.3) 0px, oklch(0.9 0.04 240 / 0.3) 2.4px, oklch(0.9 0.04 240 / 0) 2.4px, oklch(0.9 0.04 240 / 0) 40px);
background-repeat: no-repeat;
background-size: cover;

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.

Vector, the same construction as the canvas, viewBox 1920 × 1080, no external references.

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 SVG is written from the same layer stack as the canvas. Grain cannot be a vector, so a design with a noise layer saves as PNG, JPG or WebP only.

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, and background.css.

When a vector beats a picture

A background that is a gradient or a repeating motif is a few numbers, and a vector file keeps it as those numbers: a 1920 × 1080 blueprint grid is a couple of kilobytes of SVG against hundreds as a PNG, and it is sharp on every screen density. Where the background must be a file rather than CSS — a CMS field, an email builder, a slide master — SVG is usually the right one.

Not every layer has an SVG form, and the useful thing a tool can do is say which. This page writes each layer as SVG’s own gradient or pattern where one exists, writes a clearly labelled approximation where it does not, and refuses outright for grain, which no vector can carry.

Limits

  1. Grain (noise layers) cannot be exported as SVG.
  2. SVG interpolates in sRGB; OKLCH ramps are sampled every 4%, which is close but not identical.
  3. Some editors ignore mix-blend-mode; browsers honour it.

Questions people ask

Which designs come out as an exact SVG?
Linear and radial gradients in sRGB, flat colours, patterns (dots, grid, stripes, checks, waves) and the vignette are written as the same construction the canvas draws. The panel says 'the same construction as the canvas' when that is true for the whole design.
What is approximate, and why?
SVG blends gradient stops in sRGB, so an OKLCH ramp is written with a stop every 4% computed in OKLCH: close, but sampled. SVG has no conic gradient, so a conic layer is written as 180 thin wedges. A true mesh is written as soft spots over its average colour. Each approximation is listed under the button.
Why is the SVG button switched off for my design?
Because it has a noise layer, and grain has no vector form. Rather than writing a file that silently drops it, the page asks you to take the grain out or save a PNG.
Will blend modes work?
They are written as mix-blend-mode, which browsers draw. Some desktop design programs ignore it when they open an SVG, and the note says so when the design uses one.

Other background jobs

Three backgrounds from the library: Copper line, Dusk field, Paper white.

Made here, from numbers: Copper line · Dusk field · Paper white