Gray gradient: neutral codes that aren’t boring

A gray gradient stops looking boring the moment its greys are tinted. Pure neutral greys, the ones with equal red, green and blue, feel flat and digital. Nudge them slightly cool, towards blue, and you get fog, slate and steel; nudge them warm, towards brown, and you get stone, concrete and pewter. Add light that comes from somewhere and one accent colour, and grey becomes calm, modern and quietly confident. Codes for each follow.

Warm grey or cool grey: pick one

Cool greys feel technical, clean and precise. Warm greys feel architectural, natural and soft. Both work beautifully alone. Together in one gradient they fight, and the result looks like a smudge. Look at the swatches below in pairs: the top row leans blue, the bottom row leans brown, and the difference is small but obvious once you have seen it.

Cool and warm gray gradient codes

Fog and slate are the cool pair: fog for light, airy layouts and slate for serious dark ones. Storm adds a lit cloud, which gives a dark grey real depth. Stone and concrete are the warm pair, closer to building materials, and graphite is the near black you can use instead of plain black.

If you go darker still, the black gradient codes carry on from graphite. For designs built from one hue at many lightness levels, see monochrome gradient.

Silver, steel and other metallic grey gradients

Metal is not a colour, it is a reflection. A silver gradient works because of a sharp, bright band squeezed between darker stops, the way light catches a curved surface. Gunmetal uses the same trick at a darker level, and brushed steel adds fine parallel lines. These are bold, so use them for a badge, a heading plate or a single panel rather than a whole page.

Brushed steel looks best when the lines sit over a soft lit gradient instead of on their own. Two layers do it:

.steel {
  background-color: #b9bec4;
  background-image:
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.07) 0 1px, transparent 1px 3px),
    linear-gradient(135deg, #9ea4ab 0%, #e8eaed 45%, #b9bec4 55%, #7f868e 100%);
}

Grey plus one colour

Few backgrounds set off a single strong colour as well as grey. The accent looks brighter against neutral than it ever does against other colours, so a little goes a long way: one word, one button, one line. Choose the accent by industry and mood.

There are full schemes built this way in tech colour palettes and neutral colour palettes.

Grey that looks deliberate

Banding deserves its own warning. Greys have no hue to distract the eye, so every step in a smooth gradient shows, especially on large screens and after compression. A light noise layer hides it; CSS noise texture has a snippet, and gradient banding explains why it happens.

Grey gradients on websites and in dark mode

On the web, grey gradients do their best work quietly. A fog gradient behind a feature section separates it from a white page without a hard edge. In dark mode, a graphite gradient that lifts slightly towards the top of a card gives it depth, where a flat grey would look like a hole. Keep the change between stops small, a few percent of lightness, so the gradient reads as light rather than decoration. Dark mode design covers the wider rules for dark interfaces, from surface colours to contrast.

Gray gradient backgrounds in practice

Architects, engineering firms and software companies use grey because it lets the work speak. A slate gradient with white type and one blue accent makes a project announcement look precise; a warm stone gradient with graphite type makes a portfolio cover feel tactile. Architecture firm branding shows how far a restrained palette can go.

Subtle backgrounds are where a design system pays off. In Gradiently a grey Mark carries its own grain, which keeps banding at bay, and Auto ink picks light or dark type line by line as the grey shifts across the frame.