Sky gradient
A sky gradient is blue with the physics left in. The real sky is never one color: it is deepest overhead, where you look through the least air, and palest at the horizon, where scattered light piles up. Copy that one fact, dark above and light below, and a plain two-stop blend starts reading as weather.
5sky gradients, ready to use
Every version here runs vertically, because a sideways sky stops being one. Midday is the definitive pairing, azure into sky blue. Twilight and stratosphere handle the dark end of the day, overcast covers the grey sky nobody searches for but every interface needs, and powder is the near-white wash for backgrounds under dark text.
Stratosphere
linear-gradient(180deg, #001233, #0A84FF, #B8E2FF)
Three stops from the edge of space down to the haze line.
Common questions
- What colors make a realistic sky gradient?
- Deep azure at the top falling to pale blue or near-white at the bottom, which mirrors how scattering brightens the horizon. Keep the dark stop above the light one; inverting them reads as water instead of sky, and rotating the angle sideways breaks the effect entirely.
- Why is the sky darker at the top than at the horizon?
- Looking straight up, you look through the thin side of the atmosphere; toward the horizon the path is many times longer, so far more scattered light accumulates and the blue washes toward white. A gradient borrows that overlearned pattern, which is why the vertical orientation matters more than the exact hexes.
- Where do sky gradients work in a design?
- Headers and hero sections, weather and travel contexts, and any tall surface that benefits from feeling open at the top. The powder version doubles as a calm page background, and the twilight version gives dark modes a night sky instead of the usual flat near-black.
Other gradients
Share