How to create followspot effect using HTML CSS and jQuery ? (original) (raw)

Last Updated : 12 Jul, 2025

The follow-spot effect (spotlight effect) is an effect that can be easily implemented using jQuery. The effect is quite popular for the opening or front banner design for any website.

Approach: The approach is to use circle CSS on the mouse movement effect using the mousemove() function provided by jQuery.

HTML Code: The HTML code is used to design the basic structure of the body. In this section, we will use a

tag that wrapped inside a

tag.

html `

Split Effect

CSS Code: The CSS property is used to set the style to the image.

CSS `

body { margin: 0; padding: 0; }

section { background: url(geeks.png); position: relative; width: 100%; height: 100vh; background-size: cover; }

.geeks { position: absolute; width: 100%; height: 100%; }

jQuery Code: We have used the mousemove() function to track the mouse movement and apply the effect according to cursor movement. For creating a circle, just use radial-gradient along with the X and Y points that are basically the location of the cursor and provide a radius of 30% for roundness. Don't forget to apply this CSS to the div tag.

javascript `

$(document).mousemove(function (e) { let X = e.pageX; let Y = e.pageY; $(".geeks").css("background", "radial-gradient(circle at " + X + "px " + Y + "px, transparent, #000 30%)" ); });

Complete Code: In his section, we will combine the above three sections of code (HTML, CSS, and jQuery) to create a follow-spot effect.

html `

<title>Split Effect</title>

<script src=

"" title="undefined" rel="noopener noreferrer">https://code.jquery.com/jquery-3.4.1.js">

<style>
    body {
        margin: 0;
        padding: 0;
    }

    section {
        background: url(

"https://media.geeksforgeeks.org/wp-content/cdn-uploads/Geek_logi_-low_res.png"); position: relative; width: 100%; height: 100vh; background-size: cover; }

    .geeks {
        position: absolute;
        width: 100%;
        height: 100%;
    }
</style>

<script>
    $(document).mousemove(function (e) {
        let X = e.pageX;
        let Y = e.pageY;
        $(".geeks").css(
            "background",
            "radial-gradient(circle at " +
            X +
            "px " +
            Y +
            "px, transparent, #000 30%)"
        );
    });
</script>

Output: