# Sky gradients: dawn, noon, dusk and night codes

[Canonical HTML page](https://gradiently.design/guide/sky-blue-gradient)

The sky is the one gradient everybody has studied for years without trying. Here are codes for every hour of it, in the order the real sky uses, and how to put words on each.

## The short version

- A convincing sky gradient is deepest at the top and palest at the horizon, because light near the horizon travels through more air.
- At dawn and dusk the warm colours sit low, near the horizon, and the cool blues stay overhead.
- Run a sky gradient vertically with `180deg` in CSS, so the top of the design reads as the top of the sky.
- Night skies look more natural with a slightly lighter band at the horizon than a flat black.
- Dark ink reads well on noon skies and low on a dawn sky, while light ink suits the top of a dawn sky, dusk, blue hour and night.

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 indigo: #2b3a67
- First light rose: #e3a6b4
- Noon zenith: #1f6fd1
- Noon horizon: #a9d3f5
- Golden hour: #f59e42
- Dusk magenta: #b5507a
- Blue hour: #23407a
- Midnight: #03050f

One day of sky in eight colours. Each time of day borrows two or three of these, always with the darker one on top.

## 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.

- Dawn: indigo to peach: `linear-gradient(180deg, #2b3a67 0%, #6c6fa8 35%, #e3a6b4 70%, #fbd7b5 100%)`
- Pale first light: `linear-gradient(180deg, #8fa9d6 0%, #d7c6e0 55%, #fde2cf 100%)`
- Sunrise: lilac to apricot: `linear-gradient(180deg, #3d4f8a 0%, #c98fb0 60%, #ffc48a 100%)`

Three dawns. The warm stops never climb above the lower third, which is what keeps them reading as sunrise rather than sunset.

## 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.

- Clear noon: `linear-gradient(180deg, #1f6fd1 0%, #4f9be8 45%, #a9d3f5 85%, #dceefb 100%)`
- Hazy afternoon: `linear-gradient(180deg, #5b9bd5 0%, #9cc5ea 50%, #e6f1f8 100%)`
- Overcast: `linear-gradient(180deg, #8e98a3 0%, #b9c1c9 55%, #dde2e6 100%)`

Daytime skies. Clear noon is the one people mean by sky blue; overcast is useful when you want calm without colour.

For more blues beyond the sky, from navy to ice, see the [blue gradient](https://gradiently.design/guide/blue-gradient) codes. If you want the water under the sky as well, the [ocean gradient](https://gradiently.design/guide/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.

- Golden hour: `linear-gradient(180deg, #4a7fc1 0%, #a9b8c9 45%, #f3c98b 80%, #f59e42 100%)`
- Dusk: navy to coral: `linear-gradient(180deg, #1b1f4b 0%, #4b3a7a 35%, #b5507a 70%, #f08a5d 100%)`
- Blue hour: `linear-gradient(180deg, #0f1c3f 0%, #23407a 50%, #5b7fb8 100%)`

Evening skies. Dusk is the busiest of all the codes here, so give it fewer words and more space.

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](https://gradiently.design/guide/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](https://gradiently.design/guide/night-sky-gradient) guide.

Moonless night: `linear-gradient(180deg, #03050f 0%, #0b1530 55%, #1a2a55 100%)`

Near black overhead, deep navy at the horizon. Add a fine grain on top, because a gradient this dark bands easily on screens.

> **Dark skies band** Blue hour and night codes move through very few distinct colour values, so screens and compressed exports show visible steps. A light noise layer fixes it, as explained in [gradient banding](https://gradiently.design/guide/gradient-banding).

## Which sky suits which design

| Sky | Feels | Good for | Type colour |
| --- | --- | --- | --- |
| Dawn | Gentle, hopeful | Wellness, launches, morning events | White high up, dark indigo near the horizon |
| Clear noon | Open, optimistic | Travel, apps, summer offers | Dark navy |
| Overcast | Calm, serious | Reports, quiet announcements | Charcoal |
| Golden hour | Warm, nostalgic | Hospitality, photography, weddings | Dark brown or white near the top |
| Dusk | Dramatic, social | Events, music, nightlife | White |
| Blue hour and night | Premium, focused | Tech, film, late openings | White or pale blue |

A starting point. Test your actual words on your actual background, because a single gradient can need dark type at one end and light at the other.

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](https://gradiently.design/guide/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.

A vertical story with a dawn coloured background and the headline Up before the sun in the upper half

A story for an early class. The headline sits in light type in the calm upper sky, and the details sit lower where the light is softest.

## 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.

- Story 1080×1920: 1080 × 1920
- Pinterest pin 1000×1500: 1000 × 1500
- Website hero 1920×1080: 1920 × 1080
- X header 1500×500: 1500 × 500

On the story the sky has room to breathe. On the header the warm horizon band needs to be thinner, or it swallows the frame.

## 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.

```css
.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; }
```

One gradient, four hours. Pick the class with a line of JavaScript that reads the visitor's clock, or set it by hand per page.

For angles, stop positions and fallbacks, see [CSS linear gradient](https://gradiently.design/guide/css-linear-gradient).

## FAQ

### What colours make a sky gradient?

A daytime sky runs from a saturated blue such as #1f6fd1 at the top to a pale blue such as #dceefb at the horizon. Dawn and dusk add rose, peach, magenta or coral near the bottom only.

### Which direction should a sky gradient go?

Top to bottom, with the darkest colour at the top. In CSS that is `linear-gradient(180deg, top, bottom)`.

### How do I make a sunrise gradient look different from a sunset?

In design, sunrise usually reads softer and cooler, with lilac and peach and the warm band low and thin. Sunsets tend to be drawn more saturated, with stronger orange and magenta climbing higher.

### What text colour works on a sky blue gradient?

Dark navy or charcoal reads well on noon skies and near a dawn horizon. Use white on dusk, blue hour and night skies and high on a dawn sky, and check the contrast where the words actually sit.

### Why does my night sky gradient look stripy?

Very dark gradients have few colour steps, so screens show bands. Add a light grain layer and export as PNG rather than a heavily compressed JPEG.