Monochrome gradients: one hue, many shades

A monochrome gradient blends one hue through its own shades, from deep to light, without bringing in a second colour. Black to white through grey is the purest version; a navy that rises into pale blue, or an aubergine that lifts into lilac, are monochrome gradients too. They look calm and expensive because nothing competes, and for the same reason they show every flaw: banding, muddy midpoints and a hue that drifts halfway. The codes and CSS below avoid all three.

Monochrome gradient vs monochromatic colour scheme

The two terms are related and often confused. A monochromatic color scheme is a palette: several tints, tones and shades of one hue used across a whole design. A monochrome gradient is a single blend inside that idea. You can use a monochrome gradient in a design whose palette is not monochromatic at all, such as a deep blue background under orange type.

Monochrome gradient codes to copy

Each of these keeps a single hue and changes only its lightness and a little of its saturation. Darker stops are slightly more saturated than lighter ones, which is how real colour behaves in shadow and why these look natural.

For the dark end of this family on its own, see black gradients and grey gradients. For how the steps relate, tints, tones and shades is the background reading.

How to make a monochrome gradient in CSS

The simplest way to keep one hue is to write the stops in oklch and change only the first number, lightness. The hue angle stays fixed, so the colour cannot wander, and oklch spaces its lightness evenly, so the blend climbs at a steady pace. OKLCH explained covers the format.

.hero {
  /* one hue (264, a deep blue), lightness only */
  background: linear-gradient(
    in oklch 170deg,
    oklch(0.18 0.08 264) 0%,
    oklch(0.42 0.16 264) 55%,
    oklch(0.86 0.06 264) 100%
  );
}

.mono {
  /* true greyscale: chroma 0 */
  background: linear-gradient(
    180deg,
    oklch(0.12 0 0) 0%,
    oklch(0.55 0 0) 100%
  );
}

1. 1

   Pick the hue

   Choose one colour and find its hue angle. A blue sits around 260, a green around 145, a red around 25.

2. 2

   Set the darkest and lightest stops

   Keep the dark end above pure black and the light end below pure white unless you want a hard edge. Lightness from 0.15 to 0.9 is a comfortable range.

3. 3

   Place the middle stop with intent

   Move it towards the end you want to dominate. A middle stop at 30 percent gives a mostly light frame; at 70 percent, mostly dark. Gradient color stops shows more.

4. 4

   Add grain

   A faint noise layer over the gradient hides banding and adds a material feel.

Why dark monochrome gradients band

Most screens show 256 levels per channel. A gradient from black #000000 to dark grey #282828 has only 40 distinct steps to work with. Stretch it across a 1920 pixel wide hero and each step is a 48 pixel stripe, which the eye picks out easily in the dark. Multicolour gradients hide this because the channels change at different moments; a monochrome gradient changes all three together, so the bands line up.

Gradient banding and grainy gradients go into the fix in detail, with code for an SVG noise layer.

Where monochrome gradients work

Because they carry one colour, monochrome gradients let type and photography lead. They suit luxury product launches, architecture studios, music releases, and any brand whose identity is a single colour. Set the words in the lightest or darkest end of the same hue, or in white or black, and the design reads as one confident decision.

If you need an accent, take it from outside the hue and use it once: a single orange date on a navy gradient, or a red price on graphite. The gradient stays monochrome, and the accent gets all the attention because nothing else is competing for it.

A monochrome background in Gradiently can also move: a Mark renders its light live, so a one colour gradient can drift slowly behind the words, and with Pro it exports as a seamless loop at every size you design.