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="spotlight" id="spotlight">
  <div class="content">
    <h1>Cursor Spotlight</h1>
    <p>Move your mouse around.</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 dark hero background where a soft spotlight follows the mouse cursor. Use HTML, CSS and a few lines of vanilla JavaScript.

Requirements:
- A full-viewport container with background #05060f.
- Define two CSS custom properties on it, --x and --y, both defaulting to 50%.
- Layer a radial-gradient on top of the solid colour: circle 320px at var(--x) var(--y), indigo rgba(37, 6, 173, 0.55) fading to transparent at 70%.
- In JavaScript, listen for pointermove on the container, calculate the pointer position relative to the container with getBoundingClientRect, and write the values to --x and --y with style.setProperty.
- Centre a white heading and subtitle.
- No libraries.

Return a single HTML file with <style> and <script> tags.

How to build it, step by step

1. 1

   Declare --x and --y custom properties on the container with a default of 50% so the spotlight starts in the centre.

2. 2

   Use those variables as the position of a radial-gradient layered over a solid dark colour.

3. 3

   Listen for pointermove (it covers mouse, pen and touch).

4. 4

   Convert the pointer's page position into a position inside the element by subtracting getBoundingClientRect().left and .top.

5. 5

   Write the result into the CSS variables with style.setProperty. The browser repaints the gradient at the new position automatically.

Customisation tips

• Change the circle size (320px) to make the spotlight tighter or wider.
• Apply the same technique to a card for a 'glow follows cursor' hover effect.
• You don't need a CSS transition here: updating the variables on every pointer event is already smooth.

More backgrounds