What is a custom cursor?

A custom cursor is a user-defined mouse pointer that replaces the browser's default arrow or pointer icon. Websites and applications use custom cursors to reinforce branding, improve immersion in games or creative experiences, or simply add a unique visual touch to an interface. Custom cursors are typically defined in CSS using the cursor property with a url() value pointing to an image file such as .cur, .png, or .svg.

Web browsers support several cursor file formats natively. The .cur format is the classic Windows cursor format, .ani adds animation support, while .png and .svg offer modern, resolution-independent alternatives that work across all platforms.

Tool description

The Custom Cursor Tester lets you upload any cursor file and instantly preview how it looks and behaves in the browser. Once uploaded, your cursor replaces the default pointer inside a dedicated test area — a checkered viewport with a button — so you can evaluate both free-space movement and hover behavior without writing a single line of CSS.

Supported formats

Format Description
.cur Windows cursor format, widely supported
.ani Animated Windows cursor
.png Raster image, ideal for high-quality cursors
.svg Scalable vector image, sharp at any size
.ico Windows icon format, also usable as cursor

Features

  • Instant preview: Cursor is applied live as soon as the file is uploaded — no page reload needed
  • Interactive test area: Checkered viewport shows the cursor over a neutral background for clear visibility
  • Button test target: A button inside the test area lets you verify cursor behavior on interactive elements
  • Consistent cursor inheritance: The button inherits the custom cursor rather than reverting to the browser default
  • Client-side only: Files are read directly in the browser and never uploaded to any server

Use cases

  • Cursor designers: Verify how a newly created .cur or .png cursor file looks before shipping it
  • Web developers: Quickly test a cursor asset before integrating it into CSS with the cursor: url(...) property
  • Game and creative developers: Check the feel and visibility of custom pointers in interactive UI contexts

How it works

When you upload a file, the tool creates an object URL for it using the browser's URL.createObjectURL() API and injects it as a CSS cursor style on the test area. This is equivalent to writing cursor: url(your-file.cur), auto in a stylesheet. The fallback auto ensures the browser uses its default cursor if the file cannot be loaded or parsed.

Tips

  • For .png cursors, the browser uses the top-left corner (0 0) as the hotspot by default. If your cursor's active point should be elsewhere (e.g. the tip of a pencil), you may need to adjust this in your CSS after testing.
  • Animated .ani cursors play automatically in browsers that support them (primarily Chromium-based).
  • SVG cursors must be small (typically under 128×128 px) to render correctly as cursors in most browsers.