Black gradient
A black gradient is mostly a way of keeping black alive. A large flat black surface goes dead on screen, one undifferentiated slab; a slow run from true black to charcoal restores the sense of light falling on a surface without giving up the darkness. It is the default background of every premium product page for that reason.
4black gradients, ready to use
The fades here stay under fifty percent lightness at the far stop, because past that point the gradient stops reading as black with light on it and starts reading as grey. Black to white is the exception and earns its place: it is the reference ramp for checking a display's tonal range, banding visible in the midtones is the panel, not the file. Midnight leans the dark end toward blue, which is how night actually photographs.
Black to white
linear-gradient(90deg, #000000, #FFFFFF)
The reference ramp. Smooth midtones mean the display is doing its job; banding here is the panel.
Common questions
- What does a black gradient fade into?
- Charcoal for a background that stays black, white for the full reference ramp, deep blue for night. The choice is the whole design decision: everything below #434343 keeps the surface reading as black, anything lighter hands the page over to grey.
- Why does my black gradient show visible bands?
- Dark ramps expose the limits of 8-bit color: there are only so many distinct near-blacks, and a slow fade walks through each one visibly. Keep the two stops closer together, or add a whisper of noise on top. If the banding appears on the black to white ramp above, it is your display doing it, not the gradient.
- Is a black gradient better than flat black for backgrounds?
- For large areas, usually. The gradient gives edges and cards something to separate against, where flat black makes every element float in the same void. Flat black still wins for OLED power saving and for photography, where the background must disappear entirely.