CSS custom cursor with retina support

Question

I can't find any information about this topic. I want a simple custom cursor with CSS. I have this code right now:

cursor: url('img/cursor_left.png'), auto;

It shows the cursor, nothing wrong. But it's blurry, because it isn't compatible for retina display. Anyone knows how to fix this?

Thanks, Angelo.

Answer 1

I haven't tested this, but it should be possible to use image-set:

cursor: url('img/cursor_left.png'), auto;
cursor: -webkit-image-set(
  url('img/cursor_left.png') 1x,
  url('img/cursor_left_hi.png') 2x
), auto;