Grey gradient

Grey (or gray) gradients are the workhorses of interface design: a slow change of lightness that gives depth to a background, a button or a dark-mode surface without competing with content. Below are 12 grey gradients — copy the CSS, download a PNG, or open one in the editor.

Quick copy — grey classic:

background: linear-gradient(180deg, #aeaeae 0%, #a7a7a7 8.3%, #a1a1a1 16.7%, #9b9b9b 25%, #949494 33.3%, #8e8e8e 41.7%, #888888 50%, #818181 58.3%, #7b7b7b 66.7%, #757575 75%, #6f6f6f 83.3%, #696969 91.7%, #636363 100%); background: linear-gradient(in oklch 180deg, #aeaeae 0%, #636363 100%);
  • Aa · 3.1:1

    Black text: Fails AA — large text only (3:1)

    Grey classic

    #aeaeae → #636363
  • Aa · 10.8:1

    Black text: Passes AA

    Grey light

    #eeeeee → #c4c4c4
  • Aa · 8.5:1

    White text: Passes AA

    Grey dark

    #4b4d50 → #1f2225
  • Aa · 3.9:1

    Black text: Fails AA — large text only (3:1)

    Grey cool

    #b5bfc7 → #68737d
  • Aa · 4.4:1

    Black text: Fails AA — large text only (3:1)

    Grey warm

    #c9c3be → #817874
  • Aa · 3.9:1

    White text: Fails AA — large text only (3:1)

    Grey slate

    #738292 → #384352
  • Aa · 6.0:1

    White text: Passes AA

    Grey charcoal

    #616366 → #141618
  • Aa · 7.0:1

    Black text: Passes AA

    Grey fog

    #dbdee1 → #9b9fa3 → #dbdee1
  • Aa · 2.5:1

    Black text: Fails AA — no plain text

    Grey glow

    #cecece → #535558
  • Aa · 4.7:1

    Black text: Passes AA

    Grey to white

    #7e8083 → #f8f8f8
  • Aa · 4.0:1

    White text: Fails AA — large text only (3:1)

    Grey to black

    #7e8083 → #0b0b0b
  • Aa · 2.1:1

    Black text: Fails AA — no plain text

    Grey three-step

    #d7d7d7 → #8f8f8f → #484848

Using grey gradients well

Good for: dark and light UI surfaces, neutral hero backgrounds, skeleton loaders, overlays and footers.

Pairing: Pure grey can look dead next to colour; a touch of blue makes it cooler, a touch of warm hue makes it softer. Grey works as the calm partner for one strong brand colour.

Readable text: Greys lighter than about 60% OKLCH lightness need dark text; darker greys carry white text. Mid greys around #777 pass AA with neither, so avoid putting body text there. The ratio on each swatch is the worst point across the gradient (WCAG 2: 4.5:1 for body text, 3:1 for large text). Check custom pairs in the contrast checker.

These gradients are blended in OKLCH so the middle stays clean; the copied CSS includes a pre-blended fallback line for older browsers.

Questions

What is the CSS code for a grey gradient?

A simple grey gradient is background: linear-gradient(in oklch 180deg, #aeaeae 0%, #636363 100%); Copy any gradient on this page for ready CSS, including a fallback for older browsers.

What colours go well with grey in a gradient?

Pure grey can look dead next to colour; a touch of blue makes it cooler, a touch of warm hue makes it softer. Grey works as the calm partner for one strong brand colour.

What text colour is readable on a grey gradient?

Greys lighter than about 60% OKLCH lightness need dark text; darker greys carry white text. Mid greys around #777 pass AA with neither, so avoid putting body text there. Each swatch on this page shows the better of black or white text, its worst-case WCAG contrast ratio, and whether it passes AA (4.5:1), is only good for large text (3:1), or fails — for failing swatches, add a darker scrim behind the text or pick a deeper variant.

How do I download a grey gradient image?

Press “PNG” under any gradient to download a 1600×900 image, rendered in your browser. Open it in the editor to change size-independent details first, such as angle or colours.

Where are grey gradients typically used?

Common uses: dark and light UI surfaces, neutral hero backgrounds, skeleton loaders, overlays and footers.

More colour gradients