Starfield
Pure CSS 3D starfield — each star bursts from the center via perspective and a randomized animation duration, simulating a lightspeed journey.
You'll get access to the interactive demo with a free account.
This effect is part of Effect.Labs — 811 vanilla effects, some free, some premium. Atmosphere has 57 effects, including 10 free. Explore the category →
3 usage examples
How it works
The effect relies entirely on CSS 3D transforms. The .starfield-container element carries perspective: 500px, establishing a central vanishing point. Each star is a <div class="star"> — a 2×2 px white circle in position: absolute — placed via inline left and top values clustered near the center.
The @keyframes starMove animation drives each star from translateZ(0) scale(0.1) to translateZ(500px) scale(2) in an infinite linear loop. Through the parent's perspective, this Z-axis motion creates the illusion of a distant star surging forward, growing, and vanishing off-screen. Opacity ramps from 0 to 1 between 0% and 10% of the cycle, then back to 0 between 90% and 100% — preventing a hard cut at loop restart.
Each star receives a distinct animation-duration via its inline style attribute (roughly 1.7 s to 3.5 s in the reference implementation). This duration offset, combined with slightly different starting positions, produces an asynchronous radial stream with no JavaScript involvement on the animation side. A negative animation-delay staggers each star's phase, avoiding a synchronized burst on first render.
The effect is 100% CSS for motion; stars must however be present in the DOM at initialization. In the reference implementation they are either hard-coded in HTML or generated by a short init script that creates <div class="star"> elements with random positions and durations via inline style. No requestAnimationFrame or canvas is used.
Accessibility
- prefers-reduced-motion: the code includes no
prefers-reduced-motioncheck — CSS animations run regardless of the user's OS motion preference. Fix: wrap all.staranimation rules inside@media (prefers-reduced-motion: no-preference) { ... }. - The
.starfield-containercarries norole,aria-label, oraria-hiddenin the source code. Addrole="img" aria-label="Animated starfield"on the container andaria-hidden="true"on individual stars to make them transparent to screen readers. - The
.starfield-textelement usesrgba(255,255,255,0.5)on a black (#000) background — a contrast ratio of ~3.2:1, below WCAG AA (4.5:1) for normal text. Raise opacity to 0.85+ if the text conveys information. - The effect is purely decorative and has no keyboard interaction. If used as a background for a CTA, ensure the CTA itself is keyboard-focusable and meets contrast requirements.
- Star
<div>elements are empty and carry no semantics — screen readers naturally skip them, which is the expected behavior.
Browser compatibility
Requires CSS 3D transforms (perspective, translateZ, scale) and @keyframes — supported in all modern browsers. Zero JavaScript dependency for the animation.
Without 3D transform support (very old browsers), stars remain visible and static at their initial position — no blocking errors, the page stays functional.
The code
HTML structure to paste into your page (CSS + JS available with a premium account):
<div class="starfield-container" id="starfieldContainer" role="img" aria-label="Animated starfield — space journey">
<!-- Stars: each div.star receives left, top, and animation-duration as inline styles.
Generate 80–200 elements for a dense result. -->
<div class="star" style="left: 268px; top: 178px; animation-duration: 2.4s;"></div>
<!-- … repeat for each star … -->
<!-- Optional text overlay -->
<span class="starfield-text">Optional text</span>
</div>Full HTML + CSS + JS, copy-paste ready — with hundreds of premium effects.
Customize
Options passed to the API or data-* attributes:
| Option / property | Default | Effect |
|---|---|---|
| Number of div.star | ~4 in the minimal example | Adding <div class="star"> elements in the HTML (or via an init script) increases density. 80–200 stars give a dense, realistic result; below 30 the space looks empty. |
| animation-duration (inline) | 1.7 s – 3.5 s (random per star) | Short durations (1–2 s) = lightspeed feel; long durations (4–6 s) = slow drift. Greater variance makes the field feel more three-dimensional and natural. |
| perspective on .starfield-container | 500px | Lower (300 px) increases distortion and perceived speed; higher (800 px) gives softer motion. Edit the perspective: 500px line in the CSS. |
| translateZ in @keyframes starMove | 0 → 500px | Increasing the end value (e.g. 800 px) extends the visible trajectory — pair with a higher perspective to maintain perceived speed. |
| width / height on .star | 2px × 2px | 3–4 px for more visible stars; 1 px for a cosmic-dust feel. Adding box-shadow: 0 0 4px #fff creates a glow halo without changing the element's hit area. |
| background of .starfield-container | #000 (pure black) | A radial gradient (radial-gradient(ellipse at center, #0d1b2a 0%, #000 70%)) adds realistic depth and prevents the background from looking flat. |
| left / top on div.star | Clustered near center (~W/2, ~H/2) | The perspective vanishing point is at the container's center. Stars distributed within ~20% of the diagonal around center produce a balanced radial stream. Concentrating them further creates a narrower tunnel; spreading them out produces near-parallel streaks. |
FAQ
@keyframes, perspective, translateZ) — no JS is needed for movement. Stars must exist in the DOM, however. They can be hard-coded in HTML or generated by a short init script that creates <div class="star"> elements with random left, top, and animation-duration values in inline style attributes — a dozen lines are enough.perspective works: the vanishing point defaults to the container's center (perspective-origin: 50% 50%). Stars positioned slightly around this center appear to streak outward as they advance along the Z axis, replicating a spacecraft's warp speed. To shift the vanishing point, change perspective-origin on .starfield-container.style on each <div class="star">: background: #a0d8ef for a cold blue tint, width: 3px; height: 3px to enlarge, or box-shadow: 0 0 3px 1px rgba(200,220,255,0.8) for a glow. Utility classes (e.g. star star--blue star--lg) let you define variants in the stylesheet without multiplying inline attributes.
