Hover your cursor in this area to see a custom CSS cursor example. The browser will then load the cursor image and apply it in place of your OS cursor any place the cursor is declared.

What a custom cursor isĪ custom cursor is when you use CSS’ URL function to load a custom cursor image. The web being able to borrow these OS-level affordances is huge, in that it helps people understand how a piece of web UI can be used, even though it may not look like its OS equivalent. These user-facing state changes are a regular part of using your Operating System ( OS), and provide a vital clue for how a piece of OS interface, or an app running in the OS can be interacted with. This includes a pointing hand icon for links, resize and text entry indicators, zooming, dragging affordances, etc.Ī four by two grid of CSS cursors, including OS default, text edit bar, link pointer, move, open drag hand, zoom in, column resize, and cell. What a custom cursor isn’tįirst off, I’m not talking about the ability to change a mouse cursor's state. This is to say that adding a custom cursor might seem like a fun, fancy thing to do at first, but has some serious inclusive design considerations to be aware of. One of the worst things about CSS is that it lets us make websites and web apps look like anything we can dream up. One of the best things about CSS is that it lets us make websites and web apps look like anything we can dream up.

This might seem like a niche complaint, and you know what? It is.

I believe that letting CSS load a custom cursor was a mistake.

Download custom cursors