1. Tutorials
  2. CSS
  3. Flashlight Cursor

Flashlight Cursor

In this tutorial, you will learn how to create a flashlight cursor effect with CSS and JavaScript. Watch the video below for a detailed tutorial.

HTML

<body>
  <div class="content">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas veniam distinctio similique, odit nulla cum accusamus temporibus illo rerum, perferendis beatae obcaecati, nobis dolore nostrum velit aperiam quae ipsa corrupti.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas veniam distinctio similique, odit nulla cum accusamus temporibus illo rerum, perferendis beatae obcaecati, nobis dolore nostrum velit aperiam quae ipsa corrupti.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas veniam distinctio similique, odit nulla cum accusamus temporibus illo rerum, perferendis beatae obcaecati, nobis dolore nostrum velit aperiam quae ipsa corrupti.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas veniam distinctio similique, odit nulla cum accusamus temporibus illo rerum, perferendis beatae obcaecati, nobis dolore nostrum velit aperiam quae ipsa corrupti.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas veniam distinctio similique, odit nulla cum accusamus temporibus illo rerum, perferendis beatae obcaecati, nobis dolore nostrum velit aperiam quae ipsa corrupti.</p>
  </div>

  <script>
    window.addEventListener('mousemove', function(e) {
      document.documentElement.style.setProperty('--pointerX', e.clientX + 'px');
      document.documentElement.style.setProperty('--pointerY', e.clientY + 'px');
    })
  </script>
</body>

CSS

body {
	background-color: #2E3537;
	cursor: none;
	margin: 0;
}

:root {
	--pointerX: 50vw;
	--pointerY: 50vh;
}

body:before {
	content: '';
	position: fixed;
	width: 100%;
	height: 100%;
	background: radial-gradient(circle 10vmax at var(--pointerX) var(--pointerY), rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 80%, rgba(0,0,0,0.95) 100%);
}

.content {
	padding: 5em;
	color: white;
	font-size: 20px;
}