# Gray gradient: neutral codes that aren’t boring

[Canonical HTML page](https://gradiently.design/guide/grey-gradient)

Grey is the colour people choose when they don’t want to choose. Tinted, lit and paired with one accent, it becomes one of the most confident backgrounds you can use.

## The short version

- A gray gradient looks considered when its greys carry a slight tint, either cool towards blue or warm towards brown.
- Mixing warm and cool greys in one gradient makes it look dirty, so choose one temperature and keep it.
- Metallic greys come from a sharp, bright band between darker stops, which imitates light catching a surface.
- Grey gradients band more visibly than colourful ones, and a fine grain layer is the usual fix.
- One saturated accent colour against a grey gradient makes the whole design look deliberate.

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.

- Fog: #f4f6f8
- Cool mist: #aeb6be
- Slate: #4a535d
- Storm: #22272c
- Chalk: #f3f1ee
- Concrete: #b5b1ab
- Pewter: #5f5b56
- Graphite: #1c1c1e

Four cool greys and four warm ones. Graphite sits close to neutral, which is why it pairs with almost anything.

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

- Fog: `linear-gradient(180deg, #f4f6f8 0%, #d9dee3 55%, #aeb6be 100%)`
- Slate: `linear-gradient(160deg, #2b3138 0%, #4a535d 50%, #7d8792 100%)`
- Storm: `radial-gradient(ellipse at 70% 20%, #9aa3ad 0%, #5b636c 40%, #22272c 100%)`
- Warm stone: `linear-gradient(160deg, #f3f1ee 0%, #d6d1ca 50%, #9e978e 100%)`
- Concrete: `linear-gradient(135deg, #8f8b86 0%, #b5b1ab 50%, #d8d5d0 100%)`
- Graphite: `linear-gradient(160deg, #1c1c1e 0%, #2f2f33 50%, #4a4a50 100%)`

Six greys with a temperature. Storm and graphite carry white type; fog, stone and concrete want dark type.

If you go darker still, the [black gradient](https://gradiently.design/guide/black-gradient) codes carry on from graphite. For designs built from one hue at many lightness levels, see [monochrome gradient](https://gradiently.design/guide/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.

- Polished silver: `linear-gradient(135deg, #e8eaed 0%, #b9bec4 25%, #f5f6f7 50%, #9ea4ab 75%, #d6d9dd 100%)`
- Gunmetal: `linear-gradient(160deg, #1f2428 0%, #3a4147 45%, #5d666e 60%, #2a3035 100%)`
- Pewter: `linear-gradient(135deg, #5f5b56 0%, #8c8781 45%, #c2bdb6 55%, #77726c 100%)`
- Brushed steel lines: `repeating-linear-gradient(90deg, #c7cbd0 0px, #d9dce0 2px, #b8bdc3 4px)`

Metallic greys. The tighter the bright band, the shinier the metal looks; spread it wide and it turns satin.

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

```css
.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%);
}
```

Fine white lines every three pixels over a lit silver blend. Change the angle of the second layer to move where the light falls.

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

| Accent | Hex | Reads as | Good for |
| --- | --- | --- | --- |
| Electric blue | `#3b82f6` | Technical, trustworthy | Software, fintech, data |
| Signal orange | `#f97316` | Industrial, energetic | Construction, tools, logistics |
| Lime | `#a3e635` | Sporty, fresh | Fitness, running, outdoor gear |
| Blush | `#f2c6c2` | Soft, fashionable | Fashion, beauty, lifestyle |
| Brass | `#c9a24a` | Premium, classic | Architecture, watches, hotels |

Use cool greys with blue and lime, warm greys with orange, blush and brass.

There are full schemes built this way in [tech colour palettes](https://gradiently.design/guide/tech-color-palettes) and [neutral colour palettes](https://gradiently.design/guide/neutral-color-palettes).

## Grey that looks deliberate

### Looks unfinished

- Pure neutral greys with no tint
- Warm and cool greys in one blend
- Visible bands across a smooth surface
- Three or four accent colours
- Mid grey text on mid grey background

### Looks deliberate

- A slight blue or brown tint throughout
- One temperature from start to finish
- A fine grain over the whole gradient
- One accent, used sparingly
- Near white or near black type, never mid grey

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](https://gradiently.design/guide/css-noise-texture) has a snippet, and [gradient banding](https://gradiently.design/guide/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](https://gradiently.design/guide/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](https://gradiently.design/guide/architecture-firm-branding) shows how far a restrained palette can go.

A wide LinkedIn image with a cool slate grey gradient background and the words Built to last in white

A LinkedIn link image on a slate Mark. White type on the darker side; the lit area stays clear of the words.

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.

## FAQ

### How do I make a gray gradient look less boring?

Tint the greys slightly cool or warm, light the gradient from one side, add fine grain and use one saturated accent colour.

### What is the CSS for a silver gradient?

Use a bright band between darker stops, for example `linear-gradient(135deg, #e8eaed 0%, #b9bec4 25%, #f5f6f7 50%, #9ea4ab 75%, #d6d9dd 100%)`.

### Is it grey gradient or gray gradient?

Both are correct. Gray is the American spelling and grey is the British one; they mean exactly the same colour.

### What colour goes best with a grey gradient?

One strong accent: electric blue or lime with cool greys, signal orange, blush or brass with warm greys.

### Why does my grey gradient have stripes?

Smooth grey blends show every colour step, especially after compression. Add a light noise layer and export as PNG.