Using external images for CSS custom cursors

Question

Is it possible to use external image URLs for CSS custom cursors  The following example doesn t work   HTML    lt div class  test  gt TEST lt  div gt    CSS    test     background gray    width 200px    height 200px    cursor url  http   upload wikimedia org wikipedia commons d de POL apple jpg        Fiddle  http   jsfiddle net wNKcU 4

User · Accepted Answer

It wasn t working because your image was too big - there are restrictions on the image dimensions  In Firefox  for example  the size limit is 128x128px  See this page for more details   Additionally  you also have to add in auto   jsFiddle demo here - note that s an actual image  and not a default cursor    x000D   x000D   test   x000D    background gray  x000D    width 200px  x000D    height 200px  x000D    cursor url http   www javascriptkit com dhtmltutors cursor-hand gif   auto  x000D    x000D   lt div class  test  gt TEST lt  div gt  x000D   x000D   x000D

User · Answer

Originally from a Codepen pen by Chris Coyier of Codepen CSS-Tricks  x000D   x000D   auto              cursor  auto     default           cursor  default     none              cursor  none     context-menu      cursor  context-menu     help              cursor  help     pointer           cursor  pointer     progress          cursor  progress     wait              cursor  wait     cell              cursor  cell     crosshair         cursor  crosshair     text              cursor  text     vertical-text     cursor  vertical-text     alias             cursor  alias     copy              cursor  copy     move              cursor  move     no-drop           cursor  no-drop     not-allowed       cursor  not-allowed     all-scroll        cursor  all-scroll     col-resize        cursor  col-resize     row-resize        cursor  row-resize     n-resize          cursor  n-resize     e-resize          cursor  e-resize     s-resize          cursor  s-resize     w-resize          cursor  w-resize     ns-resize         cursor  ns-resize     ew-resize         cursor  ew-resize     ne-resize         cursor  ne-resize     nw-resize         cursor  nw-resize     se-resize         cursor  se-resize     sw-resize         cursor  sw-resize     nesw-resize       cursor  nesw-resize     nwse-resize       cursor  nwse-resize     body     text-align  center  font-family  -apple-system  BlinkMacSystemFont   Segoe UI   Roboto  Helvetica  Arial  sans-serif   Apple Color Emoji    Segoe UI Emoji    Segoe UI Symbol       cursors     display  flex    flex-wrap  wrap     cursors  gt  div     flex  150px    padding  10px 2px    white-space  nowrap    border  1px solid  eee    border-radius  5px    margin  0 5px 5px 0     cursors  gt  div hover     background   eee     HTML CSSResult EDIT ON  svg     cursor  url https   s3-us-west-2 amazonaws com s cdpn io 9632 heart svg   auto      svg-base64     cursor  url data text html base64 PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSItMjQxIDI0MyAxNiAxNiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojRkYwMDAwO30NCjwvc3R5bGU DQo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNLTIyOS4yLDI0NGMtMS43LDAtMy4xLDEuNC0zLjgsMi44Yy0wLjctMS40LTIuMS0yLjgtMy44LTIuOGMtMi4zLDAtNC4yLDEuOS00LjIsNC4yYzAsNC43LDQuOCw2LDgsMTAuNg0KCWMzLjEtNC42LDgtNi4xLDgtMTAuNkMtMjI1LDI0NS45LTIyNi45LDI0NC0yMjkuMiwyNDRMLTIyOS4yLDI0NHoiLz4NCjwvc3ZnPg0K   auto      png-base64     cursor  url  data image png base64 iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw eHBhY2tldCBiZWdpbj0i77u IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8 IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6M0EwMEYyRjlDMjZFMTFFNUI4QkRFMkRBRDg3QkNFRUQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6M0EwMEYyRkFDMjZFMTFFNUI4QkRFMkRBRDg3QkNFRUQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDozQTAwRjJGN0MyNkUxMUU1QjhCREUyREFEODdCQ0VFRCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDozQTAwRjJGOEMyNkUxMUU1QjhCREUyREFEODdCQ0VFRCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI Pi X ugAAAY6SURBVHja7J1bbBVFHMZ3pVajTQoxCCgaNECqJiJV41NFCdF6CRKrvrRcXkyMD6gQE16MMSbESx9INCYkeHkywRhNiJFUoK3EqDVoRVQIiBpoQDFKC4jYtK7fZP L0 2e6V7ncvx ydc953S7Z b7dWbP7O6Z9YMg8Fj26AKOgIGwGAgDYTEQBsKqQA3yE9 3C28wCLd5C3wnfCPcAl8NN8GNtNrv8M wN BuuAfvfNxkECj3HCzuhm ncs DL6Nfj8Jn4CPwASp3H7wH5R4r N7y0EM8iVygMj7cBm BhwOx2Wweh3fCDwYaW614L3rPnVSGrOUepjqLuvtFgJxnUAQIgVgBD aoTC0fhDuKVDBluTvovcoq9yBl4RsBgrUXwZ VWKG4xX ttRXAuIa2XVW5RSaLtAHBWtPgZ GxCisV QzcVSKMLtpm1eUeo4ymVQoEa8yEd2moUNyb0lZO8U 0yUC5RVYzKwGC386F9xuoVOT3g 8 pWWB0Uh a6rcIrO5pQIhGEMGKxV5WxYoBGObBeUeUkHJBASvzoC s6BSkd9J031RN7XVonKLDGcUAkIfD3ssqlTkF1MAecHCcvckfSzOAmSDhZWK IgCxkMWl3tDLiB41gKPWlyxkSA8vBEv97ycRwt0WWTakgfIDosrFblP7gKoi93lQLl3ZAKCR 0OVCryGqncaxwqd3sSEF8GER3txSv9WCxx5Ij1r ACenwInuVIuT9G2nfEj Y2JPTBrQ7B8AjAeumxK1oisgaUr2qeDyGtdPC8zpOOno8SWU8AMqHLoj7rGDybz91p0S wFXKfFT8ZdAPD0KrZlHnNc pLOSPtWqoCspjz0a7FKiALOR tWqgCMp z0a75KiBNnI92Nak 9vJ3E0woCPxaLYRlWAzEvP5RARnhfLRrRAXkBOejXScYiF0aUgE5zPlo10EVkP2cj3Z9qwKyl PRri9VA8Nm DzpVfhVANYE QlPx8BwLLGF OFHMG4l tQb wZW0sDwA85Jm96LvzDpqhM8uxkP93BWlUt8b3EOWsgfMoNJLcQPdzIHOK K9a6AEX x1rGsLZxX5Xot6cVaF8pNpxHkpZxbJfoESbdFT5RdFnVbw1hs5twq0 O1fpHYQqiViKsAD3MrKV0f eEEBV7qFkKtRFwz2835lSox5livWmGqE1QveeEUGKxy1O3Hjl2l7rKkruseLD7kLAtLHLgVF1efm5Rxmi5L6rq2Y EG51l4ENiZBCNrlxXpKfhHzjW3ngaMwTQrTtllSV3XTVh8Dl E WbS20i1U7VCpi5L6rq xuIxzjeTxDHBR7P8QabLgADlLSxe5pxT6Si8HJmdzZRx2i5L6rrELApb4Q7OvKbEjHltfspT4rm6LKmVjHthn9jPuSfqNHyfn P6hFxXLuLN sZiBfwF5z9Bf4lckM9A3g3kvpSUTve2e3wyS4ZxP3LpLbKRQtf2 uEFEcu4pXin4HuLwji QylhVtJmeMChWRTKnnPlttIYlAGEoFwC9 7PYPwG31pqoygLCEG52PB0ejp9ND6rj3VAonEK Hqdw h qnkUrQFCUMR34zbWKYyBNDONWgVEAvNEzim8bfV2sa8sPSddQAiKmG7vXB3AeDNInqzHLSAERUxWf9JhGBsrnYteNxCCcj18xDEQortdW Wo0ggQgnIlvNcRGKOqmU rAog0qu9zYPS9TNdxF6NACEqjZbNOx0ffrToPhBkHQlDE3W1etQyGmKN9ge4jk1YAkcA8ZwmMH CrjGRgExCCstYwjH3w5cbqbxsQgtJlaFQ QF  8BjIZCidmqEIGM3G620rEILygKabAFgBw3ogBGV5xVCsgeEEkIqh7DO9z3ASCEF5uOR9ivhoa91E0c4AISirS4JxXNxU0so6ugSEoKwrCONUYPEk0c4BISjdBe66eZfVdXMUiE 3zMsK5HHPcjkJhKCIy4w zQDjFc8BOQuEoMxKeeZxN3whA9EDpRU q4BxLHDoPijOAyEoqxTnwducqks9ACEomxOAPONcPeoIiNjJD0ow ovcd52BlAPlOtqfnLZ1JJ4FSIPnuPzwBvLr8HAcj39yvj6utox6Fd ugoGwGAgDYeXVvwIMAGCAb3XkplDRAAAAAElFTkSuQmCC    auto      png     cursor  url  https   s3-us-west-2 amazonaws com s cdpn io 9632 heart png    auto      gif     cursor  url  https   s3-us-west-2 amazonaws com s cdpn io 9632 tina gif    auto      cursors     display  flex    justify-content  flex-start    align-items  stretch    height  100vh      cursors  gt  div     display  flex    justify-content  center    align-items  center    flex-grow  1    box-sizing  border-box    padding  10px 2px    text-align  center    x000D   lt h1 gt The Cursors of CSS lt  h1 gt    lt div class  cursors  gt       lt div class  auto  gt auto lt  div gt       lt div class  default  gt default lt  div gt       lt div class  none  gt none lt  div gt       lt div class  context-menu  gt context-menu lt  div gt       lt div class  help  gt help lt  div gt       lt div class  pointer  gt pointer lt  div gt       lt div class  progress  gt progress lt  div gt       lt div class  wait  gt wait lt  div gt       lt div class  cell  gt cell lt  div gt       lt div class  crosshair  gt crosshair lt  div gt       lt div class  text  gt text lt  div gt       lt div class  vertical-text  gt vertical-text lt  div gt       lt div class  alias  gt alias lt  div gt       lt div class  copy  gt copy lt  div gt       lt div class  move  gt move lt  div gt       lt div class  no-drop  gt no-drop lt  div gt       lt div class  not-allowed  gt not-allowed lt  div gt       lt div class  all-scroll  gt all-scroll lt  div gt       lt div class  col-resize  gt col-resize lt  div gt       lt div class  row-resize  gt row-resize lt  div gt       lt div class  n-resize  gt n-resize lt  div gt       lt div class  s-resize  gt s-resize lt  div gt       lt div class  e-resize  gt e-resize lt  div gt       lt div class  w-resize  gt w-resize lt  div gt       lt div class  ns-resize  gt ns-resize lt  div gt       lt div class  ew-resize  gt ew-resize lt  div gt       lt div class  ne-resize  gt ne-resize lt  div gt       lt div class  nw-resize  gt nw-resize lt  div gt       lt div class  se-resize  gt se-resize lt  div gt       lt div class  sw-resize  gt sw-resize lt  div gt       lt div class  nesw-resize  gt nesw-resize lt  div gt       lt div class  nwse-resize  gt nwse-resize lt  div gt   lt  div gt   lt br gt  lt br gt  lt br gt  lt br gt  lt br gt  lt br gt  lt br gt  lt br gt  lt br gt   lt h1 gt Custom Image lt  h1 gt   lt div class  cursors  gt     lt div class  svg  gt  lt p gt SVG lt  p gt  lt  div gt     lt div class  svg-base64  gt Base 64 SVG lt  div gt     lt div class  png-base64  gt Base 64 PNG lt  div gt     lt div class  png  gt PNG lt  div gt     lt div class  gif  gt GIF lt  div gt   lt  div gt  x000D   x000D   x000D

User · Answer

cursor url  http   www javascriptkit com dhtmltutors cursor-hand gif    auto   NOTE 1   In some cases you should consider setting the offset  anchor    cursor url http   www javascriptkit com dhtmltutors cursor-hand gif  10 3  auto   in this exmple  we set offsetx to 10 and offsety to 3  from top left   so the pointer finger will be anchor  fiddle  http   jsfiddle net 5kxt1j98   you can see the difference by moving cursor to top left of container     NOTE 2  THE MAX CURSOR SIZE IS 128 128  recommended one is below 32 32

User · Answer

I found out that you need to add the pointer eg    div      cursor  url  cursorurl png    pointer

User · Answer

I would put this as a comment  but I don t have the rep for it  What Josh Crozier answered is correct  but for IE  cur and  ani are the only supported formats for this  So you should probably have a fallback just in case    test       cursor url  http   www javascriptkit com dhtmltutors cursor-hand gif    url foo cur   auto

[html] Using external images for CSS custom cursors

Examples related to html

Examples related to css

Examples related to cursor