Skip to content
Larwell Technologies
Home / Code Playground / Backgrounds
Backgrounds

Immersive Starfield Background Animation

Create a stunning starfield background animation using HTML5 Canvas and JavaScript, perfect for space-themed websites.

By Ishrafil Khan Updated June 2026 Bokaro Steel City, India
canvasJavaScriptanimationstarfield
Live Preview
HTML + CSS + JS 
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Starfield Animation</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { overflow: hidden; background: #000; }
canvas { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; }
</style>
</head>
<body>
<canvas id="starfield"></canvas>
<script>
(function() {
  const canvas = document.getElementById('starfield');
  const ctx = canvas.getContext('2d');
  let width, height;
  const stars = [];
  const MAX_DEPTH = 1000;
  const STAR_COUNT = 800;
  const SPEED = 2;

  class Star {
    constructor() {
      this.x = (Math.random() - 0.5) * width * 2;
      this.y = (Math.random() - 0.5) * height * 2;
      this.z = Math.random() * MAX_DEPTH;
      this.size = 1 + Math.random() * 2;
    }

    update() {
      this.z -= SPEED;
      if (this.z < 1) {
        this.reset();
      }
    }

    reset() {
      this.x = (Math.random() - 0.5) * width * 2;
      this.y = (Math.random() - 0.5) * height * 2;
      this.z = MAX_DEPTH;
      this.size = 1 + Math.random() * 2;
    }

    draw() {
      if (this.z < 1) return;
      const sx = (this.x / this.z) * width + width / 2;
      const sy = (this.y / this.z) * height + height / 2;
      if (sx < -20 || sx > width + 20 || sy < -20 || sy > height + 20) return;
      
      const scale = (MAX_DEPTH - this.z) / MAX_DEPTH;
      const radius = this.size * scale * 2;
      const alpha = Math.min(1, scale * 2);
      
      ctx.beginPath();
      ctx.arc(sx, sy, radius, 0, Math.PI * 2);
      ctx.fillStyle = `rgba(255, 255, 255, ${alpha})`;
      ctx.fill();
    }
  }

  function init() {
    width = window.innerWidth;
    height = window.innerHeight;
    canvas.width = width;
    canvas.height = height;
    stars.length = 0;
    for (let i = 0; i < STAR_COUNT; i++) {
      stars.push(new Star());
    }
  }

  function animate() {
    ctx.clearRect(0, 0, width, height);
    for (const star of stars) {
      star.update();
      star.draw();
    }
    requestAnimationFrame(animate);
  }

  window.addEventListener('resize', init);
  init();
  animate();
})();
</script>
</body>
</html>

This starfield animation simulates flying through space with stars streaming past the viewer. It uses HTML5 Canvas and JavaScript to project 3D star positions onto a 2D plane, creating a dynamic and immersive background effect.

How it works

Stars are initialized with random positions and depths (z-values). Each frame, the z-value decreases, moving them closer to the camera. The x and y coordinates are projected onto the canvas using a perspective formula: screenX = (x / z) * width + width/2. As stars approach (z → 0), they move outward and appear larger. Once a star passes the camera (z < 1), it is reset to a far distance with new random x,y, creating a continuous loop.

How to use it

  • Copy the entire HTML code into a new .html file.
  • The canvas automatically fills the window and handles resize events.
  • Adjust STAR_COUNT and SPEED variables in the script to change density and animation speed.
  • Integrate into your site by placing the canvas element as a full-page background behind other content.
Free to use under the MIT license. Built by Ishrafil Khan — need a custom build?

More snippets

Navigation

Pure CSS Hamburger Menu Morph to X
Loaders

CSS Bouncing Ball Loader
Loaders

CSS Loading Spinner Animation