Design Atlas
한국어
✦ Visual effects

Meteors

유성

Several tailed streaks of light shooting diagonally across the background at random positions and intervals, on a loop.

Also known as: Shooting starsMeteor shower background
···
html
<div class="sky" id="sky"></div>
css
.sky{position:absolute;inset:0;overflow:hidden;
  background:radial-gradient(120% 100% at 50% 0%,#141428,#07070d 70%)}
.m{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.1);transform:rotate(35deg)}
.m::before{content:"";position:absolute;top:1px;right:1px;width:70px;height:1px;
  background:linear-gradient(90deg,#fff,transparent);transform-origin:right center}
js
const sky = document.getElementById('sky');
const N = 8;
const meteors = [];
for (let i = 0; i < N; i++) {
  const el = document.createElement('div');
  el.className = 'm';
  sky.appendChild(el);
  meteors.push(el);
}
function launch(el) {
  const startX = Math.random() * 120 - 10;
  const dur = 1.6 + Math.random() * 1.6;
  const delay = Math.random() * 3.5;
  el.style.left = startX + '%';
  el.style.top = '-5%';
  el.style.opacity = '0';
  el.animate(
    [
      { transform: 'rotate(35deg) translate(0,0)', opacity: 0, offset: 0 },
      { opacity: 1, offset: 0.06 },
      { transform: 'rotate(35deg) translate(220px,300px)', opacity: 0, offset: 1 },
    ],
    { duration: dur * 1000, delay: delay * 1000, iterations: 1 },
  ).onfinish = () => launch(el);
}
meteors.forEach((el, i) => setTimeout(() => launch(el), i * 220));

Attach a linear-gradient tail to a point, tilt it roughly 45 degrees, and move it from off-screen top to off-screen bottom — that's one meteor. To read as natural rather than mechanical, run several at once with randomised starting position, delay, and speed; identical timing on all of them makes the pattern obvious immediately.

Appending new DOM elements forever accumulates and slows down, so reuse a fixed number of elements (say 8). When a meteor exits the viewport, JS just re-rolls its starting position and delay and restarts the animation on the same element.

Sparkles twinkle in place; meteors trace a path across the screen — that's the distinction. Combine the two for a night-sky background.

When to use

Use as a hero background, a 404 page, or decoration on a dark-theme landing. Too many at once gets distracting — keep 2–3 visible simultaneously.