Skip to content

Instantly share code, notes, and snippets.

@dsdsdsdsdsds

dsdsdsdsdsds/cursor.css

Last active November 1, 2023 11:45
Show Gist options
  • Star 42 You must be signed in to star a gist
  • Fork 6 You must be signed in to fork a gist
  • Save dsdsdsdsdsds/bd142334efcd81f0b30e to your computer and use it in GitHub Desktop.
Save dsdsdsdsdsds/bd142334efcd81f0b30e to your computer and use it in GitHub Desktop.
Download ZIP
CSS: Cross Browser hires/retina cursor image
Raw
cursor.css
.cursor {
cursor: url("cursor.png") 0 0, pointer; /* Legacy */
cursor: url("cursor.svg") 0 0, pointer; /* FF */
cursor: -webkit-image-set(url("cursor.png") 1x, url("cursor@2x.png") 2x) 0 0, pointer; /* Webkit */
}
@pugson
Copy link

pugson commented Dec 4, 2017

OMG, thank you! I spent about 40 minutes debugging this issue.

@marco-land
Copy link

im trying to solve the same issue, but still looking pixelated on FireFox

@aivarasbiliunas
Copy link

If you are using SVG be sure to set fixed height and width on SVG root node (recommended 32x32). Ref https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_User_Interface/Using_URL_values_for_the_cursor_property

@PhilSole
Copy link

@pugson, that's nothing compared to my 3 hours :'(

Thank you

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment