<div class = "wrapper">
  <p>CUSTOM MOUSE CURSOR WITH <b>CSS</b></p>
  <pre>cursor: url('image URL goes here'),auto;</pre>
</div>

* {
  cursor: url('https://i.imgur.com/6wmyrkK.gif'),auto;
}

html, body {
    height: 100%;
}
body {
    height: 100%;
    width: 100%;
    display: table;
    text-align:center; 
    font:400 17px Arial; 
    background-color:#bdc3c7; 
}

.wrapper {
    display: table-cell;
    height: 100%;
    vertical-align: middle;
}

.wrapper p{
    color:#ecf0f1;
    text-shadow:0px 0px 5px #999;
}

.wrapper pre{
  background-color:white;
  display:table;
  margin:-5px auto;
  padding:5px 10px;
  font-size:12px;
  color:#bdc3c7; 
}