Hover Over Me
Move your mouse inside this box to test your cursor.
/* Generated on cssgen.org */
Control the user experience. Explore standard system cursors or generate the exact syntax for custom image pointers with precise clicking hotspots.
Move your mouse inside this box to test your cursor.
/* Generated on cssgen.org */The cursor is the physical extension of the user's hand into the digital world. Communicating what an element does—whether it can be grabbed, resized, or clicked—is entirely dependent on serving the correct cursor state.
While the standard system cursors handle 95% of use cases, highly interactive, creative, or game-like websites often benefit from Custom Cursors. Using the url() CSS function, you can load PNGs, animated GIFs, or lightweight SVGs directly onto the user's mouse. Read more on the official MDN Web Docs.
0 0 (the top-left corner). If your custom cursor is a crosshair or a circle, you must use the X/Y coordinate sliders to move the hotspot to the dead center of your image, or users will misclick.cursor: none; unless you are replacing it entirely with a JavaScript-driven custom element, or hiding it during a fullscreen video playback. If a user cannot find their mouse, they will abandon your site immediately.You use the cursor property with a url() function, followed by the X and Y coordinates of the clicking hotspot, and a mandatory fallback. Example: cursor: url('custom.png') 16 16, pointer;
The most common reason a custom cursor fails is forgetting the fallback cursor at the end of the CSS rule. If the fallback (like auto or pointer) is missing, browsers invalidate the entire rule. Additionally, ensure your image is smaller than 128x128 pixels (32x32 is recommended).
You cannot animate the CSS cursor property itself using @keyframes or transitions. However, you can provide an animated GIF in the url() (supported by some browsers), or hide the native cursor and use JavaScript to make a DOM element follow the mouse coordinates.
The cursor is just the first step in user interaction. Once you have set the perfect pointer, make sure your clickable elements respond beautifully using our Button Hover Effects Generator. If you are building a custom JavaScript cursor that follows the mouse rather than relying on native CSS, you might want to use our CSS Keyframe Builder to add trailing pulse or glow animations to your custom cursor element!