Subtle gradients: quiet colour shifts for clean interfaces

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.

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 covers whole themes; these are the building blocks.

Where subtle gradients work in an interface

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.

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. 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. 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. 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. 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 explains the syntax, and CSS linear gradient covers the basics.

: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;
}

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.

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 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 has the saturated codes.