# Subtle gradients: quiet colour shifts for clean interfaces

[Canonical HTML page](https://gradiently.design/guide/subtle-gradients)

The best interface gradients are the ones nobody notices until they are gone. These are codes you can paste today, the places they earn their keep, and the one technical trap that catches everyone.

## The short version

- A subtle gradient changes lightness by only a few percent, or moves the hue by a small step, so a surface looks lit rather than flat.
- Subtle gradients work best on page backgrounds, cards, hero sections and dark mode surfaces, where they add depth without competing with content.
- Blending in oklch keeps a subtle gradient's lightness change even from one end to the other.
- Subtle gradients band more than bold ones because there are fewer colour steps between two close tones, and a little noise is the usual fix.
- On a dark interface, a slightly lighter top edge reads as light falling on the surface.

A **subtle gradient** moves between two colours so close together that you feel the change more than see it: white to a cool off white, near black to a slightly softer near black. That small shift makes a surface look lit, which is why clean interfaces use them on page backgrounds, cards and dark mode panels. The codes below keep the difference in lightness to a few percent; any larger and the gradient starts to become a feature rather than a surface.

## Light subtle gradient codes

Each of these starts close to white and drifts towards a faint tint. Pick the tint from your brand colour so even the background carries a trace of identity. Top to bottom blends feel most natural, because light usually comes from above.

- Paper: `linear-gradient(180deg, #ffffff 0%, #f6f7f9 100%)`
- Mist blue: `linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%)`
- Warm linen: `linear-gradient(160deg, #fdfbf7 0%, #f5efe6 100%)`
- Lilac haze: `linear-gradient(135deg, #faf8ff 0%, #f1ecfd 100%)`
- Mint wash: `linear-gradient(180deg, #f7fdfb 0%, #e9f7f2 100%)`
- Corner light: `radial-gradient(circle at 0% 0%, #ffffff 0%, #f3f4f6 70%)`

Six light subtle gradients. On a bright monitor they read as gently lit paper; on a phone in daylight, almost as white.

## Dark subtle gradient codes

Dark surfaces benefit even more, because pure flat black looks like a hole in the screen. Lift the top a touch and let the bottom settle. [Dark mode gradients](https://gradiently.design/guide/dark-mode-gradients) covers whole themes; these are the building blocks.

- Graphite: `linear-gradient(180deg, #18181b 0%, #0f0f12 100%)`
- Midnight: `linear-gradient(180deg, #111827 0%, #0b1120 100%)`
- Ink violet: `linear-gradient(160deg, #17142a 0%, #0e0c1b 100%)`
- Forest night: `linear-gradient(180deg, #10201b 0%, #0a1411 100%)`
- Top glow: `radial-gradient(ellipse 80% 50% at 50% 0%, #1f2937 0%, #0b0f17 100%)`
- Espresso: `linear-gradient(180deg, #1c1714 0%, #120e0c 100%)`

Six dark subtle gradients. The top glow suits a hero or a modal: a faint pool of light from above.

## Where subtle gradients work in an interface

| Surface | How subtle | Example |
| --- | --- | --- |
| Page background | Barely visible across the full height | `#ffffff` to `#f6f7f9` |
| Card | A touch lighter at the top edge | `#ffffff` to `#fafafa` |
| Hero section | A faint tint pooling behind the headline | Corner light or top glow |
| Button | Lighter top, slightly deeper bottom | `#4f46e5` to `#4338ca` |
| Dark mode panel | Top lifted, bottom settled | `#18181b` to `#0f0f12` |
| Sidebar or footer | A step darker than the page, still graded | `#f8fafc` to `#eef2f7` |

Subtle gradients by surface. Use one direction across the whole interface so the light seems to come from one place.

The rule of thumb: a subtle gradient should never be the thing you look at. If a reviewer comments on the gradient, it is too strong for a background. For more restrained looks across print and social as well as screens, see [minimalist backgrounds](https://gradiently.design/guide/minimalist-backgrounds).

A portrait post with a short line of type on a calm, softly shifting background

A calm background and one short line. When the colour stays quiet, the type does the work.

## How to tint a subtle gradient with your brand colour

A neutral grey gradient is safe but anonymous. Tinting the lighter or darker end with a trace of your brand hue makes the whole interface feel related to the logo without anyone being able to point at why. The trick is to keep the hue and throw away almost all the saturation.

1. **Take the brand hue** Convert your main brand colour to oklch or HSL and note only its hue: around 265 for a violet, 160 for a green, 30 for a warm orange.
2. **Keep it almost grey** Set chroma very low, around 0.005 to 0.015 in oklch, or saturation under about 30% in HSL at very high lightness. You want a whisper of colour, not a pastel.
3. **Set two lightness values** For light themes, try 99% and 96%; for dark themes, around 20% and 15%. Keep both ends on the same hue so the blend never drifts towards grey or a second colour.
4. **Check it next to pure white or black** Place the gradient beside a plain white or black block. If you can't see the difference at all, nudge the lower end; if the tint is obvious from across the room, lower the chroma.

The same tint can then carry into borders, dividers and hover states, so the gradient is one part of a quiet system rather than a lone effect. Buttons are the one place to allow a slightly stronger shift, a few percent darker at the bottom, because a hint of volume helps them look pressable.

## Writing a subtle gradient in CSS

Hex codes work everywhere. For finer control, write the colours in oklch, where the first number is perceived lightness, so you can set the shift exactly: from 99% to 96%, say. Blending in oklch also keeps the change even along the whole length. [CSS gradient oklch](https://gradiently.design/guide/css-gradient-oklch) explains the syntax, and [CSS linear gradient](https://gradiently.design/guide/css-linear-gradient) covers the basics.

```css
:root {
  --surface: linear-gradient(180deg, #ffffff 0%, #f6f7f9 100%);
}

@supports (background: linear-gradient(in oklch, red, blue)) {
  :root {
    /* lightness 99% to 96.5%, the same faint cool tint */
    --surface: linear-gradient(180deg in oklch, oklch(99% 0.003 250) 0%, oklch(96.5% 0.006 250) 100%);
  }
}

body {
  min-height: 100vh;
  margin: 0;
  background: var(--surface);
  background-attachment: fixed;
}
```

A hex fallback, then an oklch version with a precise lightness shift for browsers that support colour interpolation in gradients.

> **Fixed or scrolling** `background-attachment: fixed` keeps the gradient tied to the window, so a long page doesn't stretch it into an invisible shift. Test it on mobile, where some browsers treat fixed backgrounds differently.

## Why subtle gradients band, and the fix

Two close colours have very few steps between them in an 8 bit image. Stretch them across a 1920 pixel hero and each step becomes a visible stripe, especially on dark gradients and cheaper screens. The full explanation is in [gradient banding](https://gradiently.design/guide/gradient-banding).

### Shows bands

- Two dark, very close colours across a full screen
- A gradient saved as a compressed JPEG
- A clean blend with nothing to break up the steps

### Stays smooth

- A slightly larger shift, or a third stop
- Rendered in CSS, or exported as PNG
- A faint noise layer over the gradient

On the web, a tiny SVG noise texture laid over the gradient at a low opacity removes visible steps without anyone noticing the grain; [CSS noise texture](https://gradiently.design/guide/css-noise-texture) has the code. For social posts and slides, a Gradiently Mark carries its own grain and renders at every size, so a quiet background stays smooth whether it is a story or a banner. When you want the opposite of quiet, [vibrant gradients](https://gradiently.design/guide/vibrant-gradients) has the saturated codes.

## FAQ

### What is a subtle gradient?

A gradient between two very close colours, usually differing in lightness by only a few percent, so the surface looks gently lit rather than visibly coloured.

### What is a good subtle gradient for a white background?

Try `linear-gradient(180deg, #ffffff 0%, #f6f7f9 100%)`, which drifts from white to a faint cool grey.

### Why does my subtle gradient look stripy?

Close colours have few steps between them, so they band. Add a third stop, widen the shift slightly or lay a faint noise texture on top.

### Should subtle gradients go top to bottom?

Usually. Light tends to come from above, so a slightly lighter top reads as natural on both light and dark surfaces.