CSS Cursor List
Preview all 36 CSS cursor types by hovering and copy the code instantly
Features
All 36 cursor values displayed
CSS standard keywords collected on a single page
Preview the actual cursor on hover
Move your mouse over to see the cursor change to that shape
Organized into 6 use-case groups
Easy to find the cursor you need with brief descriptions for each
Copy CSS with one click
Copy in the form "cursor: pointer;" ready to paste
How to Use
Search by group
Find candidates from headings organized by use case such as "General" or "Drag & Drop"
Hover to preview
Move your cursor over the preview box to confirm the shape
Copy and paste
Click the copy button to get the CSS and paste it into your stylesheet
Use Cases
Confirm cursor for buttons and links
Preview the pointer cursor that appears on clickable elements
Choose cursor for drag UI operations
Compare grab, move, and copy to select the right shape for reordering or moving interactions
Distinguish between disabled and processing states
See the differences between not-allowed, wait, and progress cursors to use them correctly
Memorize cursor values in CSS learning
Learn all available cursor values and their meanings at a glance
Knowledge Base
Difference between pointer and default
The pointer cursor shows a hand shape and indicates a clickable element like a link or button. The default cursor is the standard arrow for your environment and is used over text or backgrounds where clicking does nothing.
How the cursor auto initial value works
The cursor property's initial value is auto, which makes the browser automatically choose the cursor shape based on location—text over text and default elsewhere.
Why cursor doesn't change even when specified
When cursor doesn't change, it's usually because another element overlaps on top or the setting is overridden by another rule.
- Overlapping elements：When transparent elements or pseudo-elements overlap, the cursor follows the cursor property of the topmost element.
- Override by specificity：When multiple rules apply to the same element, the cursor property of the rule with higher specificity (selector strength) takes precedence.
- Differences by OS and browser：The cursor appearance uses what your OS and browser provide, so the same value looks different on Windows and macOS.
Safety and Privacy
Runs entirely in your browser
Your input data is processed only within your browser and is never sent externally.
Processing only in your browser
Cursor display and code copying is processed entirely within your browser, and input data is not sent to any server.
Communications encrypted with HTTPS
Page loading is also encrypted by TLS, and content cannot be read by third parties.
No transmission to third parties
Input content is not sent to external services such as ad networks or trackers.
No automatic saving of results
Copied code and input suggestions are not stored on the server.
Follow RAKKOTOOLS on Google Search
189 useful tools become easier to find from Google Search and AI Search!
- Found in search
- Also shown in AI Search
- Discover new tools
Updates
- update #318
Add CSS cursor list, verify all cursor types on hover and copy