Sky gradients: dawn, noon, dusk and night codes

A sky gradient runs from a deeper colour overhead to a paler one at the horizon, because that is how daylight behaves: light near the horizon passes through more air, scatters more and drifts towards white. Get that one direction right and almost any blue reads as sky. Below are copyable codes for six times of day, from first light to a moonless night, with notes on where each one works and which colour of type sits on it.

How the real sky is arranged

Look up on a clear day and the blue straight above you is richer than the blue near the rooftops. At sunrise and sunset the sun's light crosses so much atmosphere that most of the blue is scattered away before it reaches you, leaving reds, oranges and pinks low in the sky while the zenith stays cool. That gives you two rules for any sky gradient: deep at the top, pale at the bottom, and warm colours only ever near the horizon.

Dawn and sunrise gradient codes

Dawn is the softest sky of the day. The top is still night indigo, the middle turns lilac, and a band of rose and peach sits on the horizon. It feels quiet and hopeful, which is why it suits wellness brands, morning routines, announcements of something new and anything that wants to feel gentle rather than loud.

Clear noon and daytime sky gradients

A clear midday sky is the classic sky blue gradient: saturated blue at the top fading to a pale, almost white blue at the horizon. Keep the hue steady and let lightness do the work. If the bottom stop turns grey rather than pale blue, the sky starts to look polluted. A hazy afternoon is the same idea with less saturation, and an overcast day swaps blue for a cool grey.

For more blues beyond the sky, from navy to ice, see the blue gradient codes. If you want the water under the sky as well, the ocean gradient article works the other way up: pale on top, deep at the bottom.

Golden hour, dusk and blue hour codes

The evening sky is where sky gradients get dramatic. Golden hour keeps a daytime blue overhead and a strong amber at the horizon, and the soft greyish band between them is real, so don't fight it. Dusk drops the blue to navy and adds magenta and coral. Blue hour, the short spell after the sun has gone, is almost entirely blue and is one of the most flattering dark backgrounds there is.

If your design leans fully into oranges and pinks with no blue at all, you have moved from sky into sunset, and the sunset gradient codes will serve you better.

Night sky gradient codes

A night sky is rarely pure black. Towns, the moon and the faint glow of the atmosphere keep the horizon a touch lighter than the zenith. Build a night gradient with a near black top and a deep navy horizon and it reads as sky; reverse it and it reads as a hole. For stars, moonlight and many more dark blues, read the night sky gradient guide.

Which sky suits which design

That last point matters more on skies than on most gradients, since a sky moves from dark to light by design. Place the words where the sky is calmest and pick ink for that area, not for the gradient as a whole. Text on gradient goes deeper. In Gradiently this is handled for you: a Mark keeps its calmest region behind the words, and Auto ink chooses light or dark type line by line from the Mark's own palette.

Sky gradients for every format

Tall formats suit skies perfectly: a story or a pin can show the whole climb from horizon to zenith. Wide formats squash it, so keep the horizon colours in the bottom third and let the upper sky fill the rest. That is a different arrangement for each size, which is why cropping one image across formats usually loses the horizon.

A sky gradient in CSS for every time of day

On a website, three custom properties are enough to describe any sky. Swap one class and the whole section changes hour, which is handy for a hero that follows the visitor's local time or a page that darkens as a story progresses.

.sky {
  min-height: 100vh;
  background: linear-gradient(180deg, var(--zenith) 0%, var(--middle) 50%, var(--horizon) 100%);
}

.sky--dawn   { --zenith: #2b3a67; --middle: #c98fb0; --horizon: #fbd7b5; }
.sky--noon   { --zenith: #1f6fd1; --middle: #6fb0ee; --horizon: #dceefb; }
.sky--dusk   { --zenith: #1b1f4b; --middle: #b5507a; --horizon: #f08a5d; }
.sky--night  { --zenith: #03050f; --middle: #0b1530; --horizon: #1a2a55; }

For angles, stop positions and fallbacks, see CSS linear gradient.