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.
On this page
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.
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.
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.
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.
radial-gradient(circle at 78% 18%, #fbf8ec 0%, #f4f1e3 2.5%, #9fb3d6 4%, #3b5b8f 14%, #0b1a3a 45%, #020611 90%)To combine a moon with a horizon glow, layer the radial gradient above a linear one. The 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.
.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%;
}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 covers the contrast rules.
An Instagram post at 1080×1350, with the words high in the dark part of the sky.
A Story at 1080×1920 for a sleep brand. The taller frame leaves more sky above the words.
Size
Where the light goes
Size
Where the light goes
Size
Where the light goes
Size
Where the light goes
Where the light goes
How to stop a dark blue gradient banding
Dark blue is where 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 has more recipes, and galaxy gradients 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.
Questions people ask
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.
Written by Gradiently
The team behind Gradiently, a design tool built around Marks: living gradients that make everything you design look like yours.
See our profile