Galaxy gradient: cosmic codes on deep space

A galaxy gradient is soft nebula colour glowing out of a near black ground: violet, magenta, teal or ember clouds that fade into deep space, usually with a dusting of tiny stars on top. The secret is proportion. Real photographs of space are mostly dark, and the colour lives in one or two clouds rather than across the whole frame. Below are copyable codes for the main nebula families and a complete layered starfield in CSS.

What makes a gradient look like a galaxy

A blend from purple to blue is just a purple gradient. It starts to read as space when it has the four things your eye expects from astronomy images:

• A ground that is almost black, slightly tinted blue or violet rather than neutral.
• Nebula clouds that glow from a bright core and fade out unevenly, which is a job for radial gradients.
• A brighter core inside the brightest cloud: a pale pink, lilac or cream near white.
• Stars: many tiny points of white and pale blue, a few slightly larger ones, scattered without a pattern.

Galaxy gradient codes

Each of these is a single radial gradient you can paste into a design tool or a stylesheet. They are deliberately weighted towards the dark end. The violet one is the classic space gradient; teal feels colder and more scientific; ember feels like a dying star or a sci fi poster.

If you want something closer to home, a sky with stars and a moon rather than deep space, the night sky gradient codes are gentler. For curtains of green and violet light, see aurora gradients.

Build a galaxy background in CSS, layer by layer

A single gradient gives you a nebula. A galaxy comes from stacking several, which CSS does well because background-image accepts a list. The first layer listed is painted on top.

1. 1

   Lay the ground

   A wide radial gradient from void indigo in the middle to deep space at the edges, so the frame never looks flat.

2. 2

   Add one main nebula

   A coloured radial gradient that fades to transparent, placed off centre, roughly where a third line would cross.

3. 3

   Add a second, smaller cloud

   A different hue, far from the first, at lower opacity. It adds depth without fighting for attention.

4. 4

   Scatter stars

   Tiny radial dots tiled at two or three different sizes, so the repeats never line up into a visible grid.

5. 5

   Finish with grain

   A faint noise layer over everything hides banding in the dark areas and makes it feel photographic.

.galaxy {
  min-height: 100vh;
  background-color: #03020a;
  background-image:
    /* stars, tiled at three scales */
    radial-gradient(circle at 20% 30%, #ffffff 0 1px, transparent 1.5px),
    radial-gradient(circle at 70% 80%, #dbeafe 0 1px, transparent 1.5px),
    radial-gradient(circle at 45% 60%, #ffffff 0 1.5px, transparent 2px),
    /* nebulae */
    radial-gradient(ellipse at 30% 40%, rgb(192 38 211 / 0.55) 0%, transparent 45%),
    radial-gradient(ellipse at 75% 25%, rgb(45 212 191 / 0.3) 0%, transparent 40%),
    /* ground */
    radial-gradient(ellipse at 50% 45%, #1a1240 0%, #0a0820 50%, #03020a 100%);
  background-size:
    180px 180px,
    260px 260px,
    420px 420px,
    100% 100%,
    100% 100%,
    100% 100%;
}

The radial syntax, including sizes like ellipse 60% 25% and stop positions, is covered in CSS radial gradient. For the grain layer, CSS noise texture has a copyable SVG filter approach.

Keeping a galaxy gradient from turning muddy

The most common failure is a galaxy that looks like a bruise: colours overlapping into brown or grey, and colour spread so evenly that nothing glows. Glow needs darkness around it. The fix is nearly always less colour, placed more carefully. The colour theory behind it is in muddy gradients.

Putting words on a galaxy background

Galaxy backgrounds suit white or very pale type, and they suit it best on the dark part of the frame, not on the bright nebula core. Set the headline in the empty space and let the cloud sit to one side. Stars behind small text are a real problem: they look like stray full stops. Keep the area behind body copy clear of the larger stars, or leave the stars off that region entirely.

This is the kind of balance Gradiently manages by itself. A Mark knows where your words are, moves its calmest, best contrasting region behind them and relaxes busy detail near the letters, so a cosmic background never swallows the headline. Marks can also carry slow motion, which suits a galaxy better than any still frame.

Where galaxy gradients work best

Gaming and streaming are the natural fit, and Twitch streamer branding shows how to keep one look across panels, banners and overlays. For more dark grounds that glow, read dark gradient backgrounds.