Have you ever wanted to add a fun interactive effect to your website—like making it look as if a flashlight is following your cursor in the dark? In this tutorial, we’ll break down a simple way to build exactly that using basic HTML, CSS, and JavaScript. Let’s go through each part of the code step-by-step.
HTML: Setting the Stage
The HTML is very simple. It consists of a single <div> with an ID of flashlight and two <p> tags filled with text. The flashlight div doesn’t contain any visible content—it acts as a canvas where the flashlight effect will be rendered using CSS. The <p> tags are just placeholder content (using dummy text) so you can see the flashlight effect reveal the page as you move the cursor.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flashlight Effect</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="flashlight"></div>
<p>Lorem300</p>
<p>Lorem300</p>
<script src="script.js"></script>
</body>
</html>
CSS: Designing the Flashlight
The CSS does most of the heavy lifting here. First, the universal selector (*) resets padding and margin and hides the cursor using cursor: none to simulate a flashlight-only experience.
The magic happens in the #flashlight:before pseudo-element. It covers the entire page and applies a radial gradient that starts transparent in the center and turns black around the edges—mimicking a flashlight in darkness. The position of this gradient center is dynamic and controlled by two CSS variables: --Xpos and --Ypos. These represent the current X and Y positions of the cursor and are updated in real-time using JavaScript.
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
cursor: none;
}
p {
font-size: 1em;
text-align: justify;
line-height: 1.8em;
padding: 0.2em;
}
#flashlight {
--Xpos: 50vw;
--Ypos: 50vh;
}
#flashlight:before {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
pointer-events: none;
background: radial-gradient(
circle 9em at var(--Xpos) var(--Ypos),
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 1)
);
}
@media screen and (max-width: 500px) {
body {
font-size: 14px;
}
}
JavaScript: Making It Interactive
JavaScript is responsible for tracking the user’s mouse or touch position and updating the CSS variables accordingly. It first checks if the device is a touch device by attempting to create a TouchEvent. Then, the getMousePosition() function captures the coordinates of the mouse (or finger) and updates the --Xpos and --Ypos custom properties on the #flashlight element.
These properties are read by the CSS gradient and repositioned instantly, making it feel like the flashlight is following your movement in real time.
let mouseX = 0;
let mouseY = 0;
let flashlight = document.getElementById("flashlight");
const isTouchDevice = () => {
try {
document.createEvent("TouchEvent");
return true;
} catch (e) {
return false;
}
};
function getMousePosition(e) {
mouseX = !isTouchDevice() ? e.pageX : e.touches[0].pageX;
mouseY = !isTouchDevice() ? e.pageY : e.touches[0].pageY;
flashlight.style.setProperty("--Xpos", mouseX + "px");
flashlight.style.setProperty("--Ypos", mouseY + "px");
}
document.addEventListener("mousemove", getMousePosition);
document.addEventListener("touchmove", getMousePosition);
This flashlight effect is a creative way to add interactivity and depth to your web projects. It’s a great example of how CSS and JavaScript can work together to create something visually compelling with very little code. You can further customize this effect—change the size of the flashlight beam, the darkness level, or even switch it to reveal images or colors instead of text. Try experimenting and make it your own!
