Grey gradient
A grey gradient is the workhorse nobody screenshots: the background of half the world's dashboards, cards and settings screens. Grey blends exist to create depth without opinion, and the entire craft is in the undertone, because on screen almost no grey is actually neutral and the drift shows at scale.
5grey gradients, ready to use
Silver is the definitive version, a true neutral ramp with no undertone at either stop. Light grey covers the background-under-dark-text case, slate leans blue the way most interface greys quietly do, and greige leans warm for print-like surfaces. Steel is the dark set, for footers and night modes.
Slate
linear-gradient(160deg, #708090, #36454F)
In the color library: slate gray #708090, charcoal #36454F
Common questions
- What makes a grey gradient look expensive rather than dull?
- A narrow lightness range and a consistent undertone. Cheap-looking greys swing from near-white to near-black in one element; considered ones move perhaps twenty percent and keep any color cast identical at both stops, so the surface reads as lit rather than smeared.
- Should a grey gradient be warm or cool?
- Match the company it keeps. Cool, blue-leaning greys sit naturally beside saturated interface colors and screens; warm greige sits beside photography, paper textures and food. The mismatch, warm grey around cold blue UI, is subtle but always slightly off, like mixed lighting in a photo.
- Is grey gradient the same as gray gradient?
- The same color either way; grey is the British spelling and gray the American, and search treats them as one intent. CSS accepts both spellings in its keywords, gray and grey alike, one of the few places the language war ended in a tie.
Other gradients
Share