Spotlight Effect On Mousemove Using jQuery And CSS3

This is a simple example shows how to highlight part of the webpage using a Spotlight effect. Powered by jQuery and CSS Radial-gradient function.

See also:

• jQuery Plugin To Set Focus On Any DOM Element - Focusable
• jQuery Plugin To Highlight Any DOM Elements - revealElements.js
• jQuery Plugin To Create Canvas Based Animated Spotlight Effects
• jQuery Plugin To Focus/Highlight Any Elements - focusify
• jQuery Plugin To Create Spotlight Effect On Any Elements - spotlight

How to use it:

1. Create an element for the Sportlight effect.

<div class="focus"></div>

2. Load the latest version of jQuery library at the end of the document.

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" 
        integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" 
        crossorigin="anonymous">
</script>

3. The JavaScript (jQuery script) to enable the spotlight effect on mousemove.

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

---

This awesome jQuery plugin is developed by veeteefunk. For more Advanced Usages, please check the demo page or visit the official website.