Cut out and drawn on your machine.

Make a gradient background

Stops, an angle and the space the ramp runs through. Three decisions, and the third is the one most tools never offer.

Layer 1 of 1

Shape

Kind

Angle180°

Interpolation

Space

The ramp keeps its lightness and its chroma along the way, so two hues far apart do not meet in the grey between them.

Stops

Stop 1

Position0%

Stop 2

Position100%

This layer

Blend

Opacity100%

1920 × 108016:9 · 2.1 MP · desktop screen

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

WidthpxHeightpx

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

AcrossmmDownmmResolutionDPI

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

Approximation · 356 B of CSS

Dither: the file carries a dither against banding; a browser does its own rounding.

background-color: rgb(77 86 96); /* sRGB fallback */
background-image: linear-gradient(180deg, rgb(223 229 236) 0%, rgb(75 87 98) 100%); /* sRGB fallback */
background-color: oklch(0.45 0.02 250);
background-image: linear-gradient(180deg in oklch, oklch(0.92 0.012 250) 0%, oklch(0.45 0.024 250) 100%);
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, approximate, viewBox 1920 × 1080, no external references. Gradient layer 1: an OKLCH ramp is written with a stop every 4%, because SVG blends in sRGB. Dither is not in the SVG; it belongs to an eight-bit file, and a vector has none.

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 on a single linear ramp with its parameters showing. Adding a grain layer over it is one keypress, and the CSS control switches off when you do, because noise has no declaration.

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

WidthpxHeightpxNameText 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.

Ramps already built

All forty

Eight of the sixteen linear starts in the library. Each opens here with its stops and angle intact, ready to be pushed somewhere else.

A ramp is three decisions, taken in order

The shape decides what the angle means. The stops decide where the colour is. The interpolation space decides what happens between them, and it is the one that separates a ramp that looks deliberate from one that looks muddy in the middle.

Shape

A linear ramp runs along a line at the angle you set, measured the way CSS measures it: zero points up, ninety points right. A radial ramp runs outward from a point to the farthest corner, which suits a page whose content sits in the middle of the screen. A conic ramp sweeps around a point, and it is the only one of the three that can return to its starting colour, which is why its stop list usually begins and ends on the same value.

Stops

A stop is a colour and a position between nought and one. Two is the common case. A third, placed off centre, is how a ramp gets a knee in it — most of the frame in one tone and a quick fall to another near an edge, which keeps a headline sitting on flat colour while the frame still moves.

Space

Every layer carries its own choice. OKLCH is the default because it holds chroma across the middle of a ramp; sRGB is offered because it is what a browser does by default, and a ramp being matched to an existing stylesheet has to be built the way that stylesheet draws it.

What interpolation space changes, in numbers

The two spaces agree on the ends and disagree in the middle. How much they disagree depends entirely on how far apart the hues are: adjacent hues barely differ, opposite hues differ enough to change what the background is for.

Chroma at the midpoint of a two-stop ramp, measured both ways
Ramp	sRGB midpoint	OKLCH midpoint
Blue to yellow	neutral grey, chroma 0.00	teal, chroma 0.26
Magenta to green	grey-violet, chroma 0.04	amber, chroma 0.19
Teal to sea green	chroma 0.075	chroma 0.074
Light grey to charcoal	chroma 0.00	chroma 0.00

The second row is the one that shows this is a choice rather than a correction. OKLCH keeps the chroma, and it does that by taking the short way round the hue wheel — between magenta and green, that route passes through amber. Neither midpoint is wrong. They are different answers to a question nobody was asked, which is why the control exists.

The last two rows are the honest ones. Hues that sit close together barely move, and a ramp between two neutrals has no chroma to lose at all, so the control does nothing whatever — a tool that implied otherwise would be selling the setting rather than explaining it.

Two limits of a gradient specifically

A long ramp in eight bits will band, and the dither pass trades that band for grain rather than removing it. The steeper the ramp, the less it matters: a gradient that crosses half the lightness range in 400 pixels has plenty of levels to work with, and one that crosses a tenth of it in 3840 pixels does not.
The copied declaration and the saved file are the same design and not the same picture. A browser interpolates at the size of the element and applies no dither, so a declaration stretched across a 4K viewport bands where the file does not. Where that matters, take the file.

Questions about ramps

My two-stop ramp goes grey in the middle. What is happening?

The midpoint is being computed in the encoded sRGB channels, where the straight line between two saturated hues passes through low chroma. Blue to yellow is the worst case and the one everybody notices. Switch the layer to OKLCH and the same two stops keep their chroma across the middle, because lightness, chroma and hue are interpolated as three separate quantities rather than as three channel values that happen to be stored together.

How many stops is too many?

Eight is the practical ceiling here and three is usually plenty. Each extra stop is another place the ramp changes direction, and a background with four direction changes stops reading as a background and starts reading as a pattern. If a ramp needs many stops to look right, the shape is often wrong instead — a radial with two stops does what a linear with five is usually trying to do.

What angle should a hero gradient run at?

Something off the axes. A ramp at 0 or 90 degrees has an edge that lines up exactly with the top of the frame, and any banding in it runs parallel to the content, which is where the eye finds it. Between 100 and 200 degrees the steps cross the frame diagonally and are far less visible at the same bit depth. The presets in the library sit in that range for the same reason.

Is the copied CSS the same picture as the file?

The same stops, the same angle, the same interpolation space, yes. Two differences are worth knowing. A browser draws the ramp at whatever size the element happens to be, so it rebands differently at different widths, and it applies no dither at all — the grain that the saved file carries is not in the declaration. For a large flat area the file is the safer choice; for something that has to stretch, the declaration is.

Other ways in

Backgrounds made here: Deep water · Woven grid · Basalt