Star Field
100% CSS star field — five radial gradients in a 200 × 200 px tile drift diagonally via @keyframes background-position, with zero JavaScript.
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. Backgrounds has 50 effects, including 6 free. Explore the category →
3 usage examples
How it works
.bg-stars stacks five radial-gradient() layers in a single background property. Each layer creates a sharp star by placing a white dot (2 × 2 px, or 1 × 1 px for dimmer stars) at a fixed coordinate — at 20px 30px, at 40px 70px, at 90px 40px, at 130px 80px, at 160px 120px — with the remainder of the gradient fully transparent. No blur, no intentional anti-aliasing: each star is a surgical point of light.
The first layer carries background-size: 200px 200px: the browser tiles that square across the element's full surface, multiplying the star pattern indefinitely. @keyframes starsMove shifts background-position from 0 0 to -200px -200px — exactly one tile width and height — over 100 linear infinite seconds. As a star exits one edge, its twin in the adjacent tile enters from the opposite edge, producing a perfectly seamless loop with no visible jump.
Zero JavaScript, zero Canvas, zero dependencies: a single <div class="bg-stars"> and a CSS block are all you need. Compositing is handled by the browser's rendering engine (GPU layer on Chrome, Safari, and Firefox) — CPU load at runtime is near zero. Overlay content (.bg-label or any other element) sits in the normal DOM flow, layered above the animated background.
Accessibility
- prefers-reduced-motion: not implemented. There is no
@media (prefers-reduced-motion: reduce)block: the 100-second animation runs indefinitely even when the OS signals a reduced-motion preference. Recommendation: add@media (prefers-reduced-motion: reduce) { .bg-stars { animation: none; } }to your stylesheet. .bg-starscarries noroleoraria-labelby default. For a purely decorative background this is acceptable; if the background carries narrative meaning, addrole="img"and a descriptivearia-label.- Star / background contrast: white
#fffdots on a black#000background — ratio above 21:1, well above the WCAG AA threshold (4.5:1). - No interactive elements in the background itself: no keyboard trap, no
tabindex, no mouse events. Keyboard navigation is not affected. - Overlay content (
.bg-label) is in the standard DOM and remains readable by screen readers, independent of the animated CSS background.
Browser compatibility
Relies on CSS multiple backgrounds and CSS animations — supported in all modern browsers since ~2013. Zero external dependencies.
If <code>radial-gradient()</code> or <code>@keyframes</code> are not supported, the element displays its default background color (<code>#000</code>) — no JS errors, no broken dependencies.
The code
HTML structure to paste into your page (CSS + JS available with a premium account):
<div class="bg-stars" role="img" aria-label="Continuously animated star field" style="position:relative;min-height:400px;">
<!-- Optional: overlay text content (position:absolute required) -->
<span class="bg-label">Your message</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 |
|---|---|---|
| Animation duration (100s) | 100s | Cycle speed — edit 100s directly in the animation rule. 60 s = livelier, 200 s = barely perceptible drift. |
| background-size (200px 200px) | 200px 200px | Star tile size (first layer). 100px 100px doubles visible density; 400px 400px spreads stars apart for an emptier sky. |
| Star color (#fff) | #fff | Color of the dot in each radial-gradient. #aac8ff = cold blue stars, #ffeecc = warm tone, #c8ffc8 = sci-fi green. |
| Background color (#000) | #000 | Last value in the background shorthand. #000218 = deep blue night, #0a0014 = cosmic violet. |
| @keyframes to {} endpoint | -200px -200px | background-position travel endpoint. 0 -200px = pure vertical (stars rise), -200px 0 = pure horizontal, 200px -200px = reverse diagonal (top-right). |
| background-attachment | scroll | Add background-attachment: fixed to .bg-stars for a page-scroll parallax effect — stars drift slower than the page content. |
| Layer count (5) | 5 gradients | Add extra radial-gradient(1px 1px at Xpx Ypx, #fff, transparent), lines before the background color to place more stars per tile. |
FAQ
<div class="bg-stars"> and a CSS block are all you need. No npm dependency, no canvas, no JS file to load. Copy the class and the CSS rules into your stylesheet — framework-agnostic by design.@media (prefers-reduced-motion: reduce) block. For accessible sites, add this rule to your CSS: @media (prefers-reduced-motion: reduce) { .bg-stars { animation: none; } }. The element then shows as a static star field with no movement.@keyframes starsMove { to { background-position: X Y } }. Useful values: 0 -200px = pure vertical (stars rise), -200px 0 = pure horizontal (stars slide left), 200px 200px = reverse diagonal (bottom-right). For a circular effect, combine two animations on separate axes with different durations.
