Custom Cursor
Add personality to your UI. This simple CSS solution replaces the standard arrow pointer with a graphic of your choice.
Hover Here
Notice the cursor changes to a "Help" question mark (or your custom image).
Copy the Script
<style>
/* Apply to whole page */
body {
cursor: url('my-cursor.png'), auto;
}
/* Apply to links */
a {
cursor: url('my-pointer.png'), pointer;
}
</style>Frequently Asked Questions
.cur and .png are the most reliable formats. Keep the image small (e.g., 32x32 pixels) to avoid lag.
Yes. You define the `cursor` property on the `body` tag, and it inherits down. However, you may need to specifically target `a:hover` if you want a different custom pointer for links.
Make sure you include a fallback keyword like 'auto' or 'pointer' in your CSS rule, otherwise the browser might ignore the custom image entirely.