Custom Cursor

Written by Danny • 17.02.2026

#html #cursor

Often times, adding a custom cursor to your website really ties everything together. I used to love them on my websites and started making some for funsies and 🔗 uploaded some for you to use! So here's a quick little tutorial for you on how to add them. ✨

1️⃣ First: Have your Cursor ready!
Download a cursor or create one yourself (.png will do, but I think an .ico is usually used). Upload it and copy the URL.

2️⃣ HTML:
All you have to do now is add the code to your body-tag.

cursor: url("YOUR_CURSOR_URL") 0 0, auto;

3️⃣ Full example:

<!doctype html>
<html>
<head>
<title>Your own cursor!</title>
<meta charset="utf-8">

<style>
body {
	cursor: url("YOUR_CURSOR_URL") 0 0, auto;
}
</style>
</head>

<body>
</body>
</html>

4️⃣ Little side info:
The numbers 0 0 tell the computer which exact part of your image does the "clicking".

0 pixels from the left
0 pixels from the top

Think of the standard Windows arrow: only the very tip at the top-left actually clicks on things. That's why we use 0 0. But if you had a cursor shaped like a crosshair or a target, you'd want the "click" to happen right in the middle, right?

In that case, you'd change the numbers to move the clicking point to the center of your image!

So for the crosshair cursor from the example, the middle would be 7 pixels from the left and 7 pixels from the top:

cursor: url("YOUR_CURSOR_URL") 7 7, auto;

If you have any more questions, let us know! <3