Custom Cursor

mouse and cursor 1999 still works

Swaps the mouse pointer for your own .cur or .png file.

In 2026: Works, with two rules modern browsers added: the image must be 128x128 or smaller, and you must supply a keyword fallback after the url().

Where it came from: The cursor keywords: Internet Explorer 4, 1997. The url() form with .cur files: Internet Explorer 6, 2001, which scaled every custom cursor to 32x32. CSS2 had standardised cursor with a URI in 1998.
MDN ↗CSS 2.1 ↗

<style>
body        { cursor: url(https://xbawx.com/inc/img/demo/cursors/hand.cur), auto; }
a:hover     { cursor: url(https://xbawx.com/inc/img/demo/cursors/point.cur), pointer; }
.wait-thing { cursor: url(https://xbawx.com/inc/img/demo/cursors/hourglass.cur), wait; }
</style>

<!-- .ani animated cursors were IE-only and never worked anywhere else.
     A .png works everywhere, and you can set the hotspot: -->
<style>
.custom { cursor: url(https://xbawx.com/inc/img/demo/cursors/star.png) 8 8, crosshair; }
</style>

<!-- The star is a real file in this page, so this one works right now.
     Two rules browsers added since: the image must be 128x128 or smaller,
     and a keyword fallback after the url() is required. -->
<style>
.tryme {
  cursor: url(https://xbawx.com/inc/img/demo/cursors/star.png) 8 8, crosshair;
  display: inline-block; padding: 24px 32px; border: 2px dashed #999;
  font: 13px Verdana;
}
.tryme2 {
  cursor: url(https://xbawx.com/inc/img/demo/cursors/hourglass.cur), wait;
  display: inline-block; padding: 24px 32px; border: 2px dashed #999;
  font: 13px Verdana;
}
</style>
<span class="tryme">point at this box</span>
<span class="tryme2">and this one</span>

sandboxed demo · breaks nothing but itselfrestart

More in mouse and cursor