Interactive Spotlight Beam

Colours in this gradient

• #090d16
• #38bdf8
• #0284c7
• #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="spot-wrapper" id="spotContainer">
  <div class="spot-grid"></div>
  <div class="spot-light" id="spotLight"></div>
  <div class="spot-content">
    <div class="spot-badge">Mouse Reactive</div>
    <h1>Hover to Illuminate</h1>
    <p>Move your cursor anywhere across the canvas to aim the concentrated optical spotlight beam.</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 an interactive mouse-following spotlight background in HTML, CSS and vanilla JavaScript.

Requirements:
- Dark background (#090d16) with subtle dot-matrix pattern.
- Glowing radial gradient circle positioned absolutely with pointer-events: none.
- JavaScript mousemove listener tracking pointer coordinates and updating beam position in real time.
- Centered typography on top.

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

How to build it, step by step

1. 1

   Create dot grid backdrop using radial-gradient background-image.

2. 2

   Add radial gradient spotlight element centered with transform: translate(-50%, -50%).

3. 3

   Update spotlight left and top inline styles on container mousemove event.

Customisation tips

• Set pointer-events: none on spotlight element to avoid intercepting cursor interactions.

More backgrounds