What are CSS cursors?

CSS cursors are visual indicators that change the mouse pointer appearance to communicate what actions are possible. When you hover over different elements on a webpage, the cursor changes to provide feedback about interactivity - a pointing hand for links, a text beam for editable content, or resize arrows for adjustable elements. These visual cues are essential for intuitive user interface design.

Tool description

This tool provides an interactive preview of all standard CSS cursor values. Select any cursor type from the dropdown, hover over the preview area to see it in action, and get the ready-to-use CSS code snippet.

Features

  • Live cursor preview: Hover over the preview area to see each cursor in action
  • Categorized navigation: Browse cursors by category (General, Links & Status, Selection, Drag & Drop, Resizing & Scrolling, Zooming)
  • Instant CSS code: Get the cursor property code ready to copy and use
  • Detailed descriptions: Learn what each cursor indicates to users

Use cases

  • Choosing the right cursor for interactive UI elements
  • Learning all available CSS cursor options
  • Quick reference during web development
  • Testing cursor appearance across different browsers