blindItemTest.html

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<style>
		.hero
		{
			background: url(testImg.jpg);
			background-size: cover;
			background-position: center;
			height: 100vh;
		}
		/*Flashlight overlay*/

		:root{
			/*cursor: none;*/
			--cusorX: 50vw;
			--cusorY: 50vh;
		}

		:root:before{
			content: '';
			display: block;
			width: 100%;
			height: 100%;
			position: fixed;
			pointer-events: none;
			background: radial-gradient(circle 10vmax at var(--cusorX) var(--cusorY),
				rgba(0,0,0,0) 0%,
				rgba(0,0,0,0.5) 80%,
				rgba(0,0,0,0.95) 100%

				);
		}
	</style>
</head>
<body>
	<section class="hero">
		<h1>hihihii</h1>
	</section>
	<script type="text/javascript">
		
		function update(e) {
			var x = e.clientX || e.touches[0].clientX;
			var y = e.clientY || e.touches[0].clientY;
			document.documentElement.style.setProperty('--cusorX', x + 'px');
			document.documentElement.style.setProperty('--cusorY', y + 'px');

		}
		document.addEventListener('mousemove', update);
		document.addEventListener('touchmove', update);


	</script>
</body>
</html>