z-text

<style>
.z-layer:not(:first-child) {
/*this is where you customize the color of the shadow which appears after hovering*/
color: #bacedc;
}
.z-layer {
/*this is where you customize basically anything else regarding the text*/
font-size: 6em;
filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px 1px 0 black) drop-shadow(0 2px 0 black) drop-shadow(0 -1px 0 black);
color: white;
}
</style>

<script src="https://bennettfeely.com/ztext/js/ztext.min.js"></script>

<span class="hero-text">neato!</span>
<!--for the options below, you can look at the creator's website at https://bennettfeely.com/ztext/ for an explanation as to what these do and how to change the values to fit your needs. have fun with it!-->
<script>
  var ztxt = new Ztextify(".hero-text", {
  depth: "40px",
  fade: true,
  layers: 25,
  direction: "both",
  event: "pointer",
  eventRotation: "35deg",
  eventDirection: "default"
});
</script>