CSS Cursor Generator

The CSS cursor property controls the visual indicator that appears when your mouse hovers over an element on a webpage. This subtle but powerful design tool communicates interactivity to users, signaling whether they can click, drag, resize, or interact with different parts of your interface. Whether you're building a web application or styling a simple website, choosing the right cursor type significantly impacts the user experience and perceived professionalism.

This generator showcases all standard CSS cursor values organized by category—from general-purpose cursors like default and none, to specialized ones for links, text selection, dragging, resizing, and zooming. Simply browse the categories, hover over each cursor type to see a live preview of how it appears on screen, and click to copy the ready-made CSS declaration (cursor: value;) to your clipboard. This workflow eliminates the need to remember syntax or hunt through documentation.

Common use cases include marking disabled form elements with not-allowed, showing grab and grabbing cursors for draggable components, and using resize cursors like col-resize or row-resize to indicate resizable boundaries. Modern browsers support all these cursor values without additional configuration, making them an accessible way to enhance usability across desktop and touchscreen interfaces.