Build a layered CSS starfield that separates parallax drift from twinkle opacity timing, uses staggered delays, stable backgrounds, and reduced-motion fallback.
Original clean-room implementation by Animation Patterns. Code examples are available under CC BY 4.0.
A useful starfield separates depth movement from brightness timing. Near and far layers can translate at different rates while individual stars twinkle with staggered delays, so the field reads as spatial depth instead of one synchronized blinking background.
Avoid making every star animate every frame. Too many opacity and shadow changes become noisy and can drain battery in idle screens. Under reduced motion, keep the layered stars visible and stop both drift and twinkle so the backdrop remains calm.
Layer naming matters because drift and twinkle have different jobs. Treat the slow parallax field as depth, then layer short opacity pulses on selected points; do not use one huge synchronized opacity keyframe for the whole sky.
Foreground readability is the real acceptance test. Check the brightest twinkle frame, not the quiet rest frame, and keep the starfield aria-hidden unless it communicates explicit state through nearby text.
Interactive examples
Three starfield expression methods separate layer parallax, per-star twinkle phase, and orbital drift so the same sky domain shows different animation mechanics.
Layer drift · depth bands
Depth is communicated by different layer translation distances, not by changing star color.
Per-star delay · opacity scale
The expression method is per-star phase staggering without layer travel.
Transform-origin · circular drift
Depth is expressed with circular transform drift, not a scrolling layer.
A CSS starfield separates layer drift from per-star twinkle timing so depth motion and brightness pulses do not all synchronize.
<div class="starfield" aria-hidden="true"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div><style>.starfield {width: 18rem;aspect-ratio: 16 / 9;position: relative;overflow: hidden;border-radius: 1rem;background: #020617;}.starfield span {position: absolute;width: 3px;height: 3px;border-radius: 999px;background: #e0f2fe;box-shadow: 0 0 12px rgba(167,139,250,.55);22animation: star-twinkle 2.6s ease-in-out infinite, star-drift 7s linear infinite;}24.starfield span:nth-child(2n) { animation-delay: -.9s, -2s; }.starfield span:nth-child(3n) { animation-delay: -1.7s, -4s; }26.starfield span:nth-child(1) { left: 8%; top: 20%; }.starfield span:nth-child(2) { left: 24%; top: 68%; }.starfield span:nth-child(3) { left: 42%; top: 34%; }.starfield span:nth-child(4) { left: 62%; top: 18%; }.starfield span:nth-child(5) { left: 82%; top: 56%; }@keyframes star-twinkle {0%, 100% { opacity: .28; transform: scale(.72); }50% { opacity: 1; transform: scale(1.18); }}@keyframes star-drift {36to { translate: -18px 6px; }}38@media (prefers-reduced-motion: reduce) {.starfield span { animation: none; opacity: .72; }}</style>
Twinkle is brightness timing and parallax is depth movement. Combining them into one synchronized loop makes the field look mechanical.
Synchronized opacity pulses look artificial. Staggered delays make the same dots feel spatial.
Enough to avoid simultaneous blinking. Negative animation delays are useful because the field starts in a distributed state.
Not for a static gallery pattern. Deterministic positions keep hydration, tests, and screenshots stable.
Moving the whole starfield shifts the component footprint. Drift an overscanned inner layer inside a fixed box instead.
Overscan the internal layer if needed, but keep the outer component footprint fixed so the background never pushes layout.
Stop twinkle and drift. Keep a static starfield so the scene still has its intended theme.
A starfield becomes believable when drift and twinkle are separate systems. Parallax layers move at different speeds to imply depth, while individual points brighten on staggered delays to avoid synchronized blinking. The pattern is not simply "stars"; it is the separation of spatial movement from local brightness timing.
Use it for immersive space, night, map, or calm ambient scenes where the background is allowed to carry a little motion. It can support hero sections, empty states, and game-like environments when foreground content has enough contrast. Do not use it as a generic loader, a dense dashboard texture, or a decorative layer behind critical reading.
Near and far layers translate at different distances, either as separate DOM layers or as multiple background layers. Each star owns an opacity or scale keyframe with a unique animation-delay, so the field avoids synchronized blinking while keeping the outer container stable.
Too many stars with box-shadow and opacity loops can be expensive and noisy. Keep the star count modest, vary timing deliberately, and avoid stacking large blur shadows on every point. The brightest twinkle frame is the one to test against foreground text, because a quiet rest state can hide contrast problems.
Reduced motion should stop both parallax drift and twinkle. The starfield is usually aria-hidden; any actual status, navigation, or story content must live outside the decorative layer. If the scene communicates state, expose that state in text instead of relying on animated brightness.