CSS Space, Star & Particle Backgrounds

33 space and particle backgrounds in pure CSS: star fields, shooting stars, warp speed tunnels, galaxies, floating particles and particle networks.

Parallax Starfield Background

Three layers of stars drift upward at different speeds over a deep night sky, so the near stars pass the far ones. Each layer is one tiled gradient moved by exactly one tile.

space · particles · dark

Shooting Stars Background

Meteors streak diagonally across a dark, dusty sky every few seconds, each with a glowing head and a fading tail. The streaks move on transform only, staggered with negative delays.

space · particles · dark

Twinkling Stars Background

Four-pointed stars flare and fade at their own pace over a still field of faint stars, like a clear night sky. Each sparkle is one clip-path span that scales and turns.

space · dark · subtle

Spiral Galaxy Background

A tilted two-armed spiral galaxy turns slowly around its bright core in a field of stars. The arms are one box-shadow list of stars and dust, so the whole disk rotates as a single layer.

space · dark · particles

Warp Speed Background

Star streaks burst out of the center and stretch as they race past, the classic jump to hyperspace. Each streak is a line from the center that grows with scaleX, so nothing repaints.

space · dark · particles

Snowfall Background

Snow falls in three depths over a winter night, near flakes bigger, softer and faster than far ones, each layer swaying on its own. Tiled gradients keep it to three moving layers.

particles · dark · subtle

Rain Background

Slanted rain in two depths pours over a dark, wet evening while ripples spread across the ground. The streaks are tiled elliptical gradients on two rotated layers.

particles · dark

Floating Bubbles Background

Soap bubbles of every size wobble up a soft pastel wash and slip off the top. Each bubble rides a full-height carrier span, so it crosses any hero whatever its height.

particles · playful · light

Fireflies Background

Fireflies drift and blink above dark hills at dusk, some near and bright, some small and far away. Wandering runs on translate and blinking on opacity, so the two never sync up.

particles · dark · subtle

Confetti Background

Paper confetti in four hues flutters down a light backdrop, each piece flipping in 3D as it sways. Colors come from the accent with relative color syntax, so one variable retints it.

particles · playful · light

Particle Network Background

Clusters of linked dots drift and turn over a dark field while their links fade in and out, a pure CSS take on particles.js. Each cluster is one span: nodes in box-shadow, links in gradients.

particles · geometric · dark

Floating Particles Background

Specks of dust float up through slanted beams of light in a dim room, glinting as they drift. The motes ride full-height carriers, and the beams sway and breathe on one layer.

particles · dark · subtle

Bokeh Lights Background

Out-of-focus light discs in three hues drift and swell over a dark backdrop, each with the brighter rim of real lens bokeh. The discs are flat radial gradients, so no blur filter is needed.

particles · dark · subtle

Rising Embers Background

Glowing embers climb from an unseen fire, flickering and zigzagging as they cool and fade halfway up a dark backdrop. The climb, the zigzag and the flicker are three separate animations.

particles · dark

Matrix Rain Background

Columns of glyph marks light up as bright heads fall past and leave fading trails, the digital rain from The Matrix. The glyphs are a gradient mask, so no font or text is involved.

dark · particles

Fireworks Background

Rockets climb and burst into double rings of sparks that sag and fade over a night sky, in four hues. Each burst is one element whose box-shadow sparks spread out as it scales up.

particles · dark · playful

Falling Leaves Background

Autumn leaves drift down a warm backdrop, rocking side to side like a pendulum and flipping over as they fall. The rock is a rotate around a pivot above each leaf, the fall a full-height carrier.

particles · light · playful

Cherry Blossom Background

Pink petals ride a spring breeze diagonally across a pale sky, tumbling in 3D as they go. Each petal's carrier is the size of the background, so the diagonal holds in any container shape.

particles · light · subtle

Floating Hearts Background

Hearts in three shades rise from the bottom of a blush backdrop, swaying, beating and fading out near the top. Each heart is four gradients on one pseudo-element, no clip-path or SVG.

particles · playful · light

Floating Balloons Background

Glossy party balloons on strings float up a soft sky in five hues, the far ones smaller and slower, each tilting as it drifts. Sizes scale per balloon with font-size, so one set of rules draws all.

playful · light · particles

Floating Lanterns Background

Paper sky lanterns glow and flicker as they drift up into a violet dusk, near ones large and bright, far ones small and dim. A warm radial highlight at the base of each lantern is the flame.

particles · dark · subtle

Orbiting Planets Background

Five planets circle a glowing sun on faint orbit lines, inner ones fast and outer ones slow, with the lit side always facing the sun. Each orbit ring just rotates, carrying its planet.

space · dark · geometric · tailwind

Rain on Window Background

Beads of rain cling to a window over blurred city lights while bigger drops slide down in fits and starts, leaving wet trails. The stop and go comes from keyframes with short, nearly flat segments.

particles · dark · subtle

Black Hole Background

A glowing accretion disk swirls around a black hole, passing behind it and in front of it, ringed by a thin halo of bent light. The front half of the disk is a second copy clipped with inset().

space · dark · tailwind

Star Trails Background

Arcs of starlight circle the pole star over dark hills, like a long exposure photo of the night sky, and the whole sky keeps turning. Each trail is one bordered circle showing a quarter or half arc.

space · dark · subtle

Solar Eclipse Background

A total solar eclipse: the black moon sits in a halo of corona rays that shimmer as two ray layers turn in opposite directions, with a diamond ring glint pulsing at the rim.

space · dark · tailwind

Nebula Background

Clouds of glowing gas in two hues swirl slowly behind dark dust lanes and a field of stars, with a few bright stars flaring. Two cloud layers turn in opposite directions and blend with screen.

space · dark · gradient

Planet Horizon Background

The curved limb of a giant planet fills the bottom of a starry sky, its cloud bands drifting as it turns under a glowing atmosphere, while a small moon crosses overhead. Only transforms animate.

space · dark

Starfield Zoom Background

The flying starfield screensaver: stars stream out of the dark center and grow as they pass, so you seem to glide through space. Four star layers scale up on a shared loop and fade at both ends.

space · dark · particles

Twilight Shooting Stars Background

A twilight sky fades from deep navy to a warm glow over a dark hill while stars twinkle and the odd shooting star streaks past. Each meteor is a gradient line with a glowing head, mostly at rest.

space · dark · gradient

Constellation Background

Star patterns light up one after another on a dark sky: the stars brighten, the lines between them draw themselves in, hold, then fade. Inline SVG paths with pathLength 1 drawn by stroke-dashoffset.

space · particles · dark · geometric

Dotted Wave Background

A field of glowing dots stretches into the distance and rolls in slow swells, like a 3D particle wave in a dark hero. Each row of dots lifts on a staggered delay inside a preserve-3d plane.

waves · particles · dark

Milky Way Background

A diagonal band of the Milky Way drifts across a dark sky: dense star dust, a warm glowing core and dark dust lanes, with loose stars twinkling around it. Star tiles slide by one tile per loop.

space · dark · particles

How to use these space & particle backgrounds

Each background is one element that fills its container. Give your hero or section position: relative, put the background element inside it as the first child, and lift your content above it with position: relative; z-index: 1. For a full-page background, use position: fixed on the layer instead.

To change the accent color, set --bgx-color. To change the scale of the pattern (stars, grid cells, blobs, waves), set --bgx-size: everything inside is in em. Keep text contrast in mind on busy backgrounds.

Every snippet ships with a prefers-reduced-motion rule that freezes the background for people who asked their OS for less motion. The layers animate transform, opacity and background-position, which stay smooth on large areas.