Gray gradient
A gray gradient is the workhorse nobody screenshots: the background of half the world's dashboards, cards and settings screens. Gray blends exist to create depth without opinion, and the entire craft is in the undertone, because on screen almost no gray is actually neutral and the drift shows at scale.
5 gray gradients, ready to use
Silver is the definitive version, a true neutral ramp with no undertone at either stop. Light gray covers the background-under-dark-text case, slate leans blue the way most interface grays 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 gray gradient look expensive rather than dull?
- A narrow lightness range and a consistent undertone. Cheap-looking grays 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 gray gradient be warm or cool?
- Match the company it keeps. Cool, blue-leaning grays sit naturally beside saturated interface colors and screens; warm greige sits beside photography, paper textures and food. The mismatch, warm gray 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