Sparkling Stars Cursor Trail

In this tutorial, you will learn how to add a sparkling stars cursor trail with CSS and JavaScript. Watch the video below for a detailed tutorial.

JS

<script>
    window.addEventListener('mousemove', function(e) {
      var arr = [1, 0.9, 0.8, 0.5, 0.2];

      arr.forEach(function(i) {
        var x = (1 - i) * 75;
        var star = document.createElement('div');

        star.className = 'star';
        star.style.top = e.pageY + Math.round(Math.random() * x - x / 2) + 'px';
        star.style.left = e.pageX + Math.round(Math.random() * x - x / 2) + 'px';

        document.body.appendChild(star);

        window.setTimeout(function() {
          document.body.removeChild(star);
        }, Math.round(Math.random() * i * 600));
      });
    }, false);
</script>

CSS

body {
	background-color: #2e3537;
}

.star {
	position: fixed;
	pointer-events: none;
}

.star:before, .star:after {
	position: absolute;
	top: 0;
	left: 0;
	content: '\2726';
	font-size: 9px;
}

.star:before {
	color: transparent;
	text-shadow: 0 0 3px rgb(250, 250, 174);
}

.star:after {
	background: yellow;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}