Author
Customizing scrollbars and cursor styles is a simple way to enhance user experience and make your website feel interactive and unique. While these are mostly visual enhancements, they also improve usability by providing clear feedback to users.
Modern browsers (especially WebKit-based browsers like Chrome, Safari, Edge) support CSS scrollbar styling using pseudo-elements.
::-webkit-scrollbar → the whole scrollbar::-webkit-scrollbar-track → the background track::-webkit-scrollbar-thumb → the draggable part (thumb)<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Scrollbar Example</title>
<style>
/* Scroll container */
.scroll-container {
width: 300px;
height: 200px;
overflow-y: scroll;
border: 2px solid #ccc;
border-radius: 8px;
padding: 1rem;
margin: 50px auto;
}
/* WebKit Scrollbar */
.scroll-container::-webkit-scrollbar {
width: 12px;
}
.scroll-container::-webkit-scrollbar-track {
background: #f0f0f0;
border-radius: 10px;
}
.scroll-container::-webkit-scrollbar-thumb {
background: #0077cc;
border-radius: 10px;
}
.scroll-container::-webkit-scrollbar-thumb:hover {
background: #005fa3;
}
/* Firefox */
.scroll-container {
scrollbar-width: thin;
scrollbar-color: #0077cc #f0f0f0;
}
</style>
</head>
<body>
<div class="scroll-container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Praesent vitae eros eget tellus tristique bibendum.</p>
<p>Donec rutrum sed sem quis venenatis.</p>
<p>Proin viverra risus a eros volutpat tempor.</p>
<p>In quis arcu et eros porta lobortis sit amet at magna.</p>
<p>Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
<p>Scroll to see the custom scrollbar in action!</p>
<p>Keep adding more content to make the scrollbar visible.</p>
</div>
</body>
</html>
This style is perfect for minimalist designs and doesn’t distract users.
/* For a thin, modern scrollbar */
.scroll-container::-webkit-scrollbar {
width: 6px;
}
.scroll-container::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.5);
border-radius: 3px;
}
.scroll-container::-webkit-scrollbar-track {
background-color: transparent;
}
The cursor property allows you to change how the pointer looks on different elements. This improves UX, letting users know what is clickable or draggable.
Common values:
default → Standard arrowpointer → Hand icon (links/buttons)text → Text selectioncrosshair → Crosshair pointermove → Indicates draggable itemsbutton {
cursor: pointer; /* hand icon for clickable elements */
}
a {
cursor: pointer;
}
textarea, input {
cursor: text; /* I-beam for text editing */
}
div.drag {
cursor: grab; /* shows grab icon */
}
<button class="custom-btn">Hover me</button>
.custom-btn {
padding: 10px 20px;
font-size: 16px;
background-color: #0077cc;
color: white;
border: none;
border-radius: 5px;
cursor: pointer; /* default pointer */
transition: transform 0.2s;
}
.custom-btn:hover {
cursor: pointer; /* pointer on hover */
transform: scale(1.05);
}.custom-cursor {
cursor: url('cursor.png'), auto; /* fallback auto */
}
You can create interactive UI elements where custom scrollbars and cursor changes reinforce each other:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Scrollbar + Cursor Demo</title>
<style>
/* Scroll container */
.scroll-container {
width: 350px;
height: 200px;
overflow-y: scroll;
border: 2px solid #ccc;
border-radius: 8px;
padding: 1rem;
margin-bottom: 30px;
}
/* Thin, modern scrollbar */
.scroll-container::-webkit-scrollbar {
width: 6px;
}
.scroll-container::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.5);
border-radius: 3px;
}
.scroll-container::-webkit-scrollbar-thumb:hover {
background-color: rgba(0, 0, 0, 0.7);
}
.scroll-container::-webkit-scrollbar-track {
background-color: transparent;
}
.scroll-container {
scrollbar-width: thin;
scrollbar-color: rgba(0,0,0,0.5) transparent;
}
/* Cursor styles */
.scroll-container:hover {
cursor: grabbing; /* indicates draggable content */
}
button.custom-btn {
padding: 10px 20px;
font-size: 16px;
background-color: #0077cc;
color: white;
border: none;
border-radius: 5px;
cursor: pointer; /* pointer on hover */
transition: transform 0.2s, background-color 0.2s;
margin-bottom: 20px;
}
button.custom-btn:hover {
transform: scale(1.05);
background-color: #005fa3;
}
.draggable {
width: 150px;
height: 80px;
background-color: #ff6600;
color: white;
display: flex;
align-items: center;
justify-content: center;
cursor: grab;
border-radius: 5px;
user-select: none;
margin-bottom: 30px;
}
.draggable:active {
cursor: grabbing;
background-color: #cc5200;
}
</style>
</head>
<body>
<h1>Interactive Scroll + Cursor Demo</h1>
<!-- Button with pointer cursor -->
<button class="custom-btn">Hover Me!</button>
<!-- Draggable div -->
<div class="draggable">Drag Me</div>
<!-- Scrollable container -->
<div class="scroll-container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Praesent vitae eros eget tellus tristique bibendum.</p>
<p>Donec rutrum sed sem quis venenatis.</p>
<p>Proin viverra risus a eros volutpat tempor.</p>
<p>In quis arcu et eros porta lobortis sit amet at magna.</p>
<p>Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
<p>Scroll down to see the thin scrollbar in action!</p>
<p>Move your cursor over this area to see the grab cursor effect.</p>
</div>
</body>
</html>