The cursor CSS property changes the mouse cursor when the mouse pointer is over an element. This is a short interactive playground on modifying cursor pointers.

Hover over the rectangle and use the widgets below to play around with different cursors.

General Cursors

Cursor

.cursor-area { cursor: auto; }

Links & Status

Cursor

.cursor-area { cursor: context-menu; }

Selection

Cursor

.cursor-area { cursor: cell; }

Drag and Drop

Cursor

.cursor-area { cursor: alias; }

Resizing & Scrolling

Zooming

Cursor

.cursor-area { cursor: zoom-in; }

With Urls

Cursor images can be used with the url() function.

Cursor

.cursor-area { cursor: url(https://res.cloudinary.com/css-playground/image/upload/v1535220420/doge_1.jpg), auto; }

Conclusion

There are a lot of cursors you could use. This could be much more useful if you’re building an interactive website that could use that extra cursor context. Even for me, looking up all of these cursor types was useful. If you’re curious, I grabbed a large list of the possible cursors from the MDN article on Cursors.

HTML
CSS
Output