Black Gradient Palettes

Black gradients are the quietest ramps in the library and the most useful for structure. They move from a near-black into a slightly lifted charcoal, or from a deep tone into actual black, and the difference between those two directions is what decides whether a surface feels like a shadow or like a void. Used behind content they create depth without color, which is why they appear in dashboards, editorial layouts and anything that needs the eye to rest.

Each gradient below is given with its stops and the CSS that reproduces it, and each links to a page with its angle and values. Because these ramps sit so close to the floor of the scale, small differences in value do most of the work.

These ramps are chosen for depth rather than for color, and the differences between them are small on purpose. A ramp that lifts from black into charcoal reads as a lit surface; one that falls into black reads as a shadow or a void. In a dark interface the first is usually what a panel needs, since a panel that ends in pure black loses its edge against the page behind it.