How to set the cursor style to indicate scrolling in any direction in CSS
How to Style a Cursor to Indicate Scrolling in Any Direction with CSS
Before getting into this topic, let’s first understand the importance of the cursor as a UI element. As we know, the first thing users interact with on a website is the cursor. That’s why manipulating the cursor’s style and effects is paramount to design, as it contributes significantly to the overall user experience.
The cursor property is used to set the mouse cursor, which appears when we point the mouse at an element. It applies to all elements and is inherited, meaning that child elements will also have the same cursor as their parent.
- The computed value can be either absolute or specified, depending on whether or not we use URLs in the property value. It has a discrete animation style.
-
This is specified by providing one or more comma-separated URLs for the cursor image, but a fallback keyword value is required.
-
When styling, the browser will attempt to load the https://coder-cafe.com/wp-content/uploads/2025/09/images specified by the URLs. If there is an error loading the https://coder-cafe.com/wp-content/uploads/2025/09/images, the cursor will fall back to the keyword value.
We can also optionally provide two space-separated numbers after the URLs, defining the x and y coordinates of the cursor hotspot, relative to the top-left corner of the image.
Let’s take a brief look at each of these values now.
- url(s) – This is an optional value containing the source location of the image file we wish to use as the cursor. We can also provide more than one image as the cursor by specifying a comma-separated list of URLs, in case we have more than one cursor for fallback.
-
X and Y – These are also optional numeric values that refer to the exact location in the cursor being pointed at; the cursor hotspot. These numbers actually refer to the pixel size, which is clamped to the extents of the cursor image and is relative to the top-left corner of the image, which corresponds to “0 0”.
-
Keyword Value – This is a required attribute value that specifies the type of cursor to use, or the cursor to use if the image fails to load. There are many keyword values available for use, such as auto, default, none, help, wait, crosshair, and more.
Using the All-Scrolling Property
At this point, we understand the cursor property and its possible values. The question then becomes, what keyword value will set the cursor to scroll in any direction? The answer is “all-scroll.” The all-scroll property value is used for elements that we want to scroll in any direction.
Example
Below is an example of using the all-scroll keyword value to set the cursor style to scroll in any direction.
<!DOCTYPE html>
<html>
<head>
<style>
#all-scrollValue {
color: brown;
cursor: all-scroll;
}
</style>
</head>
<body>
<h1>Using all scroll property to change cursor</h1>
<h2 id="all-scrollValue">
Hover over this text to see the cursor change to any-direction scroll.
</h2>
</body>
</html>
Using the Move Property
According to bug 275174, all cursor property values now work the same as the Move property values in Windows. Therefore, Windows users can also use the Move property values to set scrolling in any direction.
Example
The following is an example of using the Move property value to set the cursor to scroll in any direction.
<!DOCTYPE html>
<html>
<head>
<style>
#all-scrollValue {
color: brown;
cursor: all-scroll;
}
#movePropertyValue {
color:crimson;
cursor: move;
}
</style>
</head>
<body>
<h1>Using all scroll property to change cursor</h1>
<h2 id="all-scrollValue">
Hover over this text to see the cursor change to any-direction scroll.
</h2>
<h2 id="movePropertyValue">
Hover over to see the effect of move property value. </h2>
</body>
</html>
Conclusion
In summary, CSS makes it easy to style a custom cursor to indicate scrolling in any direction. By using the “cursor” CSS property, you can customize the appearance of your website’s cursor and ensure it accurately reflects user actions, such as scrolling in any direction. With just a few lines of code, you can create an intuitive experience for your users.