Cursores CSS
Referencia de propiedad del cursor CSS visual
Pase el cursor aquí para probar
cursor: auto;
Use these tools directly in Chrome
Install the DailyDevTools extension — access all tools from your browser toolbar
What is CSS Cursor?
CSS provides 30+ cursor property values that control what the mouse cursor looks like when hovering over an element. Choosing the right cursor communicates affordance — users expect a pointer on clickable elements, a text cursor on editable fields, and a grab cursor on draggable items. DailyDevTools' CSS Cursor reference shows a live interactive demo of every cursor value with its CSS syntax.
How to use CSS Cursor
- 1Hover over any cursor swatch to see the cursor change in real-time
- 2Click a cursor name to copy its CSS syntax (cursor: pointer;) to your clipboard
- 3Browse by category: General, Link, Status, Selection, Drag, Resize, and Zoom cursors
- 4Use the custom cursor section to generate CSS for a custom cursor from an image URL
Frequently asked questions
Which cursor should I use for clickable elements?
Use cursor: pointer for links and buttons. Avoid overusing pointer on non-interactive elements — it misleads users. Use cursor: default for non-interactive elements and cursor: not-allowed for disabled controls.
Can I use a custom image as a CSS cursor?
Yes. Use cursor: url('/path/to/cursor.cur'), auto; The url() can point to a .cur, .png, or .svg file. Include a fallback keyword (auto or pointer) after the comma in case the custom cursor fails to load.
What is cursor: none used for?
cursor: none hides the system cursor entirely. It is used in interactive art installations, custom cursor implementations with JavaScript, and immersive web experiences where a custom animated cursor replaces the default.
Comments
También te puede gustar
Explora otras herramientas populares para desarrolladores