Interactive CSS Cursor List

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;
}

Cursor

Links & Status

Cursor

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

Cursor

Selection

Cursor

.cursor-area {
    cursor: cell;
}

Cursor

Drag and Drop

Cursor

.cursor-area {
    cursor: alias;
}

Cursor

Resizing & Scrolling

Cursor

.cursor-area {
    cursor: all-scroll;
}

Cursor

Zooming

Cursor

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

Cursor

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;
}

Image Url

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.