CSS Cursor Gallery

What the CSS Cursor Gallery Does

The CSS Cursor Gallery puts every standard cursor keyword in one place. Each tile shows the value and a short explanation, and applies that cursor to itself so you can feel it by hovering. Click a tile to copy a ready to paste cursor: value; declaration, or select it to inspect it in the test pad and CSS output box. The whole gallery works offline once loaded, and nothing you do leaves the browser.

How to Use the Gallery

1. Hover any tile to preview exactly how the cursor will look over that element.
2. Click a tile to select it and copy the CSS declaration to your clipboard.
3. Use the search box to narrow the list, for example by typing "resize" or "zoom".
4. Move your pointer over the test pad in the left column to try the selected cursor before pasting it into a stylesheet.

The cursor Property in One Minute

The CSS cursor property controls which pointer the browser displays over an element. It accepts keyword values such as pointer, grab, or zoom-in, and it can also take a custom image with a fallback keyword. The keyword set has grown over the years and now covers selection modes like cell and vertical-text, drag states like grabbing and no-drop, and directional resize arrows for every edge and corner.

Browser support is broad, but a few values still behave differently across platforms. Resize cursors, for example, are rendered by the operating system and can look different on macOS and Windows even though the CSS is identical. The gallery reflects whatever your browser draws, so it doubles as a quick compatibility check.

Custom Cursor Images

You are not limited to keywords. The property accepts a URL and optional hotspot coordinates before the fallback keyword, like cursor: url(cursor.png) 4 12, pointer;. The two numbers position the click hotspot from the top left corner of the image. Always finish the list with a keyword so the browser has something to show if the image fails to load or the format is not supported.

Accessibility Notes

• Keep native cues. Changing the cursor over input fields, buttons, and links can confuse users who rely on those signals. Change cursors to reinforce an interaction, not to replace it.
• Avoid hiding the cursor. The none value removes the pointer entirely and should only appear in controlled situations such as custom drawing canvases.
• Do not use cursor changes as the only state signal. Hover effects should complement visible styles like color and outline changes.
• Respect touch devices. Cursors do not exist on touchscreens, so never make an action depend on the pointer appearance alone.

If you are building the rest of the interaction around this, pair the gallery with the CSS Animation Generator for motion states or the CSS Border Radius Generator for clickable shapes. When the stylesheet grows, the CSS Specificity Calculator helps you see which rules win, and the CSS Variables Generator keeps repeated values like cursor images organized as tokens.