# Galaxy gradient: cosmic codes on deep space

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

A galaxy is not a colour, it is depth: a dark ground, clouds of light, and points of white scattered through it. Here are the codes and the layering that make it convincing.

## The short version

- A galaxy gradient is built from a near black ground, one or two soft clouds of nebula colour and a scattering of small stars.
- Radial gradients suit galaxies better than linear ones, because nebulae glow outwards from a bright centre.
- Most of a galaxy background should stay dark, with colour covering perhaps a third of the frame.
- Placing two nebula colours far apart avoids the muddy grey that appears where opposite hues overlap.
- Very dark gradients band easily, so a galaxy background needs a light grain layer before export.

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.

- Deep space: #03020a
- Void indigo: #1a1240
- Nebula violet: #6d28d9
- Cosmic magenta: #c026d3
- Deep teal: #0e7490
- Ion teal: #2dd4bf
- Ember: #fb923c
- Star core: #fdf4e3

A galaxy palette. Choose the ground, one nebula family, and the star core. Using every colour at once is how space turns into a rainbow.

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

- Violet nebula: `radial-gradient(ellipse at 30% 40%, #c026d3 0%, #6d28d9 25%, #1e1b4b 55%, #05040f 85%)`
- Teal nebula: `radial-gradient(ellipse at 70% 35%, #2dd4bf 0%, #0e7490 25%, #172554 55%, #030712 85%)`
- Ember nebula: `radial-gradient(ellipse at 60% 60%, #fb923c 0%, #be185d 25%, #3b0a2a 55%, #08030a 85%)`
- Pink cosmic dust: `radial-gradient(circle at 20% 80%, #ec4899 0%, #7c3aed 30%, #1e1b4b 60%, #020617 90%)`
- Spiral galaxy core: `radial-gradient(ellipse 60% 25% at 50% 50%, #fdf4e3 0%, #c4b5fd 15%, #4c1d95 40%, #0b0820 75%)`
- Milky Way band: `linear-gradient(135deg, #04030c 0%, #1b1446 35%, #8b7fd6 50%, #1b1446 65%, #04030c 100%)`

Six galaxy gradients. The spiral core uses a flattened ellipse, and the Milky Way band is a bright stripe through dark sky.

If you want something closer to home, a sky with stars and a moon rather than deep space, the [night sky gradient](https://gradiently.design/guide/night-sky-gradient) codes are gentler. For curtains of green and violet light, see [aurora gradients](https://gradiently.design/guide/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. **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. **Add one main nebula** A coloured radial gradient that fades to `transparent`, placed off centre, roughly where a third line would cross.
3. **Add a second, smaller cloud** A different hue, far from the first, at lower opacity. It adds depth without fighting for attention.
4. **Scatter stars** Tiny radial dots tiled at two or three different sizes, so the repeats never line up into a visible grid.
5. **Finish with grain** A faint noise layer over everything hides banding in the dark areas and makes it feel photographic.

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

A complete galaxy in one rule. Because the star tiles are 180, 260 and 420 pixels, their pattern only repeats where all three line up, which is rarely.

The radial syntax, including sizes like `ellipse 60% 25%` and stop positions, is covered in [CSS radial gradient](https://gradiently.design/guide/css-radial-gradient). For the grain layer, [CSS noise texture](https://gradiently.design/guide/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](https://gradiently.design/guide/muddy-gradients).

### Looks muddy

- Violet, teal and orange all overlapping in the middle
- Colour covering the whole frame
- A neutral grey or pure black ground
- Stars in a neat, visible grid
- Smooth, clean digital surface with banding

### Looks like deep space

- One main cloud and one small companion, far apart
- Colour on about a third of the frame, the rest dark
- A ground tinted indigo or blue
- Stars tiled at uneven sizes
- Fine grain over everything

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

A wide design with a deep space background, a glowing cloud of colour to one side and the words Launch night in white

A stream announcement at YouTube thumbnail size. The words sit in the dark half; the colour lives on the other side.

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

| Use | Size | Tip |
| --- | --- | --- |
| Twitch offline screen | 1920×1080 | Nebula on one side, schedule on the dark side |
| YouTube channel art | 2560×1440 | Keep the core near the centre safe area |
| Discord server banner | 960×540 | One cloud only; it is shown small |
| Phone wallpaper | 1080×1920 | Put the nebula low, clear of the clock |
| Album or playlist cover | 1080×1080 | A spiral core in the middle works as a symbol |
| Event poster | A4 at 300 dpi, 2480×3508 | Print darkens deep tones, so lift the ground a little |

Galaxy gradients are at home in gaming, music, tech and anything that happens at night.

Gaming and streaming are the natural fit, and [Twitch streamer branding](https://gradiently.design/guide/twitch-streamer-branding) shows how to keep one look across panels, banners and overlays. For more dark grounds that glow, read [dark gradient backgrounds](https://gradiently.design/guide/dark-gradient-backgrounds).

## FAQ

### What colours are in a galaxy gradient?

A near black ground such as #03020a, a nebula colour such as violet #6d28d9, magenta #c026d3 or teal #2dd4bf, and a pale core close to white. Most of the frame stays dark.

### How do I make a galaxy background in CSS?

Stack several radial gradients in `background-image`: a dark ground, one or two nebula clouds fading to transparent, and tiny dots tiled at different `background-size` values for stars.

### Why does my space gradient look muddy?

Opposite colours are overlapping and too much of the frame is coloured. Use one main cloud, keep a second hue far away from it, and let the dark ground dominate.

### What font colour works on a galaxy background?

White or a very pale lilac or blue, placed on the dark part of the frame rather than over the bright nebula core.