toolsmoah

CSS Cursor Generator

A tool to generate and preview CSS2, CSS3 cursor styles and custom cursors.

CSS2 CursorsUniversal Support

auto
Click to copy
inherit
Click to copy
crosshair
Click to copy
default
Click to copy
help
Click to copy
move
Click to copy
pointer
Click to copy
progress
Click to copy
text
Click to copy
wait
Click to copy
e-resize
Click to copy
ne-resize
Click to copy
nw-resize
Click to copy
n-resize
Click to copy
se-resize
Click to copy
sw-resize
Click to copy
s-resize
Click to copy
w-resize
Click to copy

CSS3 CursorsModern Browsers

none
not IE, Safari, Opera
Click to copy
context-menu
not Firefox, Chrome
Click to copy
cell
not Safari
Click to copy
vertical-text
Click to copy
alias
not Safari
Click to copy
copy
not Safari
Click to copy
no-drop
Click to copy
not-allowed
Click to copy
ew-resize
Click to copy
ns-resize
Click to copy
nesw-resize
Click to copy
nwse-resize
Click to copy
col-resize
Click to copy
row-resize
Click to copy
all-scroll
Click to copy
grab
only Webkit and Firefox
Click to copy
grabbing
only Webkit and Firefox
Click to copy
zoom-in
only Webkit and Firefox
Click to copy
zoom-out
only Webkit and Firefox
Click to copy

Custom CursorsAdvanced

URL-based Cursors

cursor: url(images/cursor.cur), auto;# required by IE
cursor: url(images/cursor.png) x y, auto;# x y are hotspot coordinates
auto is the fallback cursor when custom cursor fails to load

Supported Formats

.cur
.png
.jpg
.gif

Example Usage

/* CSS */ cursor: url('custom-cursor.png') 16 16, pointer;

URL-based Cursors

cursor: url(images/cursor.cur), auto;# required by IE
cursor: url(images/cursor.png) x y, auto;# x y are hotspot coordinates
auto is the fallback cursor when custom cursor fails to load

Supported Formats

.cur
.png
.jpg
.gif

Example Usage

/* CSS */ cursor: url('custom-cursor.png') 16 16, pointer;

Accessibility Considerations

  • • Provide additional visual cues instead of relying solely on cursors to express functionality
  • • Use cursors that are visible in high contrast mode
  • • Use animated cursors sparingly considering accessibility settings
  • • Provide focus indicators for keyboard navigation users

Performance Optimization

  • • Preload custom cursor images to prevent delays
  • • Use CSS sprites to reduce HTTP requests
  • • Avoid unnecessary cursor changes to improve performance
  • • Consider that custom cursors are not displayed in mobile environments
    CSS Cursor Generator | toolsmoah