# Night sky gradients: deep blues, stars and moonlight codes

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

A believable night sky is never one flat navy. It has a dark zenith, a glowing horizon, and light that comes from somewhere. Here are the colours, the codes and the small details that sell it.

## The short version

- A night sky gradient is darkest at the top of the frame and lightest near the horizon, because the sky overhead is the furthest from any lingering light.
- Real night skies are rarely pure black: they sit between deep navy, indigo and blue grey, with a warmer or greener band at the horizon.
- Stars can be drawn in CSS with tiny radial gradients layered over the sky, each repeated at a different tile size so the pattern never looks like a grid.
- A moon reads best as a small, bright radial gradient with a wide, faint falloff into the surrounding blue.
- Dark blue gradients band easily, so add light grain and export PNG or high quality video rather than heavily compressed JPEG.

A **night sky gradient** is a vertical blend that starts almost black at the top and lifts into a softer blue near the horizon, often with a faint warm or teal band right at the bottom. That direction matters: overhead is the darkest part of any night sky, and the horizon still holds a little scattered light from towns, the setting sun or the moon. Get that order right and even two colours read as night. Add a moon, a few stars and some grain, and it reads as a place.

## The colours of a real night sky

Look at photographs of the sky after dark and you will find very little true black. The zenith is a deep navy with a hint of violet. The middle of the sky is indigo or slate. The horizon picks up whatever light is around: orange from street lamps, lilac in the blue hour, a faint green under the aurora at high latitudes. Picking these as separate stops is what separates a night sky from a generic [navy gradient](https://gradiently.design/guide/navy-gradient).

- Zenith: #020611
- Deep navy: #0b1a3a
- Night blue: #1e3a6e
- Horizon blue: #3b5b8f
- Town glow: #8a5a4a
- Moonlight: #f4f1e3

A working night palette: four blues from top to bottom, one warm horizon tone and a moon white that is slightly cream rather than pure white.

## Night sky gradient codes

Each of these runs top to bottom at 180 degrees, so the darkest colour sits at the top of the frame. Copy one as it is, or swap the horizon stop to change the hour and the setting.

- Clear midnight: `linear-gradient(180deg, #020611 0%, #0b1a3a 55%, #1e3a6e 85%, #3b5b8f 100%)`
- Blue hour: `linear-gradient(180deg, #0a1033 0%, #1c2a6b 45%, #4a5aa8 75%, #a78bb8 100%)`
- City glow: `linear-gradient(180deg, #05070f 0%, #141a33 60%, #3d2f4a 85%, #8a5a4a 100%)`
- Polar night: `linear-gradient(180deg, #01030a 0%, #071a2e 50%, #0e3b4a 80%, #1f6f6a 100%)`
- Desert dark: `linear-gradient(180deg, #000000 0%, #070b1c 50%, #1a1f3d 80%, #3a3350 100%)`
- Moonrise: `radial-gradient(circle at 70% 25%, #f4f1e3 0%, #c9d4e8 3%, #4a6a9e 12%, #142447 40%, #050a1a 85%)`

Six skies. The blue hour has a lilac horizon, the city glow a sodium orange, the polar night a hint of teal, and the moonrise is lit from one bright point.

Notice that the stops are not evenly spaced. Most of the frame stays dark, and the colour change happens in the bottom fifth, which is how a real horizon behaves. Even spacing makes the sky look like a ramp instead of a dome. For the reasoning behind uneven stops, see [gradient colour stops](https://gradiently.design/guide/gradient-stops).

## How to add a moon

A moon is a radial gradient with three parts: a small disc of near white, a quick drop into pale blue, and a long, faint halo that fades into the sky. Keep the disc small, around 3 to 5 percent of the frame width. A large, soft moon reads as a spotlight. Place it off centre, high in a corner, so it never competes with your headline.

Moon over deep navy: `radial-gradient(circle at 78% 18%, #fbf8ec 0%, #f4f1e3 2.5%, #9fb3d6 4%, #3b5b8f 14%, #0b1a3a 45%, #020611 90%)`

The cream disc stops at 2.5 percent, the pale blue ring at 4 percent, and the halo spreads to 14 percent before the sky takes over.

To combine a moon with a horizon glow, layer the radial gradient above a linear one. The [radial gradient](https://gradiently.design/guide/radial-gradient) guide explains positions and sizes in more depth.

## How to draw stars in CSS

Stars are tiny radial gradients: a hard dot of white that stops a fraction of a pixel later. Give each star layer its own `background-size` so it tiles at a different rate. Tiles of 200, 230, 290 and 170 pixels repeat out of step, so the eye never finds the grid. Vary the opacity too: real stars are not all the same brightness.

```css
.night-sky {
  min-height: 100vh;
  background-color: #020611;
  background-image:
    radial-gradient(1px 1px at 25px 35px, #ffffff 50%, transparent 51%),
    radial-gradient(1px 1px at 120px 80px, rgba(255, 255, 255, 0.75) 50%, transparent 51%),
    radial-gradient(2px 2px at 170px 150px, #fdfaf0 50%, transparent 51%),
    radial-gradient(1px 1px at 60px 140px, rgba(200, 215, 255, 0.6) 50%, transparent 51%),
    radial-gradient(circle at 78% 18%, #f4f1e3 0%, #9fb3d6 1.5%, rgba(59, 91, 143, 0.5) 8%, transparent 25%),
    linear-gradient(180deg, #020611 0%, #0b1a3a 55%, #1e3a6e 85%, #3b5b8f 100%);
  background-size: 200px 200px, 230px 230px, 290px 290px, 170px 170px, 100% 100%, 100% 100%;
}
```

Four star layers at different tile sizes, a moon with a transparent halo, and the clear midnight sky underneath.

> **Fewer stars look more real** A dense star field looks like noise on a phone screen. Keep stars sparse near the horizon, where light washes them out, and let a few larger ones carry the scene.

## Night sky gradient design ideas

Night skies suit late events, launches, sleep and wellness brands, astronomy clubs, music releases and anything that happens after dark. The dark top half is a natural home for light type, and the brighter horizon gives the eye a floor. Put your headline in the upper middle and keep the moon away from it. If the words cross the horizon band, check that they still read: [text on a gradient](https://gradiently.design/guide/text-on-gradient) covers the contrast rules.

A portrait event post for a stargazing night, light text set high on a deep blue night sky

An Instagram post at 1080×1350, with the words high in the dark part of the sky.

A vertical story with a short calm headline on a midnight blue gradient for a sleep product

A Story at 1080×1920 for a sleep brand. The taller frame leaves more sky above the words.

| Use | Size | Where the light goes |
| --- | --- | --- |
| Phone wallpaper | Story frame 1080×1920 | Horizon glow at the bottom, below the dock |
| Website hero | 1920×1080 | Moon top right, headline left |
| Event post | 1080×1350 | Glow low, words high |
| Playlist cover | 1080×1080 | Moon small and off centre |
| Slides | 1920×1080 | Keep the sky dark behind the title |

Where to place the bright parts of a night sky in common formats.

## How to stop a dark blue gradient banding

Dark blue is where [gradient banding](https://gradiently.design/guide/gradient-banding) is most visible, because screens have few distinct steps between near blacks. Spread the darkest stops over a larger distance, add a fine noise layer at very low opacity, and avoid heavy JPEG compression. For deeper dark palettes in general, [dark gradient backgrounds](https://gradiently.design/guide/dark-gradient-backgrounds) has more recipes, and [galaxy gradients](https://gradiently.design/guide/galaxy-gradient) push the same sky into violet and magenta.

If you would rather not hand build the grain, light and legibility, Gradiently's Marks are living backgrounds that render at every size you design in and calm themselves behind your words. Search the Market for colour words such as "midnight" or "deep navy" and design with any unclaimed Mark for free.

## FAQ

### What colours make a night sky gradient?

Start with a near black navy such as `#020611` at the top, move through `#0b1a3a` and `#1e3a6e`, and finish with a lighter blue such as `#3b5b8f` at the horizon. Add a warm or lilac stop at the very bottom for town light or the blue hour.

### Which direction should a night sky gradient run?

Top to bottom at 180 degrees, darkest at the top. The sky overhead is always darker than the horizon at night.

### How do I add stars to a CSS gradient?

Layer several tiny `radial-gradient()` dots over the sky and give each layer a different `background-size`, so the repeats fall out of step and never look like a grid.

### Why does my dark blue gradient show stripes?

That is banding: too few colour steps across a large dark area. Add a little grain, spread the dark stops further apart and export PNG instead of a compressed JPEG.

### Is a night sky gradient good behind text?

Yes, light text reads well on the dark upper sky. Keep the headline away from the moon and the bright horizon band.