Deep Space Starlight Canvas

Colours in this gradient

• #02040a
• #38bdf8
• #818cf8
• #ffffff

The code

Plain HTML, CSS and JavaScript with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.

<div class="space-stage">
  <canvas id="spaceCanvas" class="space-canvas"></canvas>
  <div class="space-overlay"></div>
  <div class="space-content">
    <div class="space-badge">Deep Space Orbit</div>
    <h1>Interstellar Horizon</h1>
    <p>Dynamic procedural starfield simulation with realistic stellar magnitude and atmospheric scintillation.</p>
  </div>
</div>

The AI prompt

Paste this into an AI coding tool to generate the same background, then ask it to adapt the colours, text or framework to your project.

Create a twinkling starlight canvas background in HTML, CSS and vanilla JavaScript.

Requirements:
- Fullscreen HTML5 canvas element with deep space backdrop (#02040a).
- Array of star objects with randomized X, Y, radius, and oscillating alpha opacity.
- 60fps requestAnimationFrame loop.
- Responsive resize handler.
- Centered typography on top.

Return one HTML file with <style> and <script> tags.

How to build it, step by step

1. 1

   Generate an array of star coordinates with random radius and scintillation rates.

2. 2

   In animation loop, update opacity values with sine-like oscillation.

3. 3

   Draw stars using context.arc() and rgba() fillStyle.

Customisation tips

• Vary star radii between 0.5px and 2px to mimic genuine astronomical apparent magnitude.

More backgrounds