Question 1

How do I change the cursor in CSS?

Accepted Answer

Use the cursor property: cursor: pointer shows a hand icon for clickable elements, cursor: crosshair for drawing tools, cursor: grab / cursor: grabbing for draggable items, cursor: not-allowed for disabled elements, cursor: zoom-in for enlargeable content. There are over 30 cursor keywords available.

Question 2

How do I create a custom cursor with CSS?

Accepted Answer

Use cursor: url() with an image file: cursor: url('cursor.png') 0 0, auto. The two numbers after the URL set the hotspot (click point offset from the top-left corner). For retina displays, provide both 1x and 2x images. Keep custom cursor images small (32×32px or smaller) for performance.

CSS Cursor Generator

Custom Cursor Rule

Generated CSS

Related Tools