Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to create a custom scrollbar with CSS?
Custom scrollbars allow you to style the appearance of scrollbars to match your website's design. Using CSS pseudo-elements, you can customize the scrollbar's width, colors, and hover effects.
Syntax
/* Webkit-based browsers only */
::-webkit-scrollbar {
width: value;
}
::-webkit-scrollbar-track {
/* Track styling */
}
::-webkit-scrollbar-thumb {
/* Handle styling */
}
::-webkit-scrollbar-thumb:hover {
/* Handle hover styling */
}
CSS Scrollbar Properties
| Property | Description |
|---|---|
::-webkit-scrollbar |
Defines the overall scrollbar container |
::-webkit-scrollbar-track |
Styles the scrollbar track (background) |
::-webkit-scrollbar-thumb |
Styles the scrollbar handle (draggable part) |
::-webkit-scrollbar-thumb:hover |
Styles the handle on hover |
Example
The following example creates a custom purple scrollbar with rounded corners −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
height: 200vh; /* Creates vertical scrollbar */
margin: 0;
padding: 20px;
}
/* Scrollbar width */
::-webkit-scrollbar {
width: 16px;
}
/* Track (background of scrollbar) */
::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
}
/* Handle (draggable part) */
::-webkit-scrollbar-thumb {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 10px;
border: 2px solid #f1f1f1;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
}
.content {
font-size: 18px;
line-height: 1.6;
}
</style>
</head>
<body>
<h1>Custom Scrollbar Demo</h1>
<p class="content">
This page demonstrates a custom scrollbar design. The scrollbar features a gradient purple handle
with rounded corners and a subtle shadow effect. Scroll down to see the custom scrollbar in action.
</p>
<div class="content">
<h2>Content Section 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<h2>Content Section 2</h2>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<h2>Content Section 3</h2>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<h2>More Content</h2>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</body>
</html>
A webpage with a custom purple gradient scrollbar appears. The scrollbar has rounded corners, a light gray track, and changes color when hovered. The page content is tall enough to trigger vertical scrolling.
Browser Support
Important: Custom scrollbar styling using ::-webkit-scrollbar only works in Webkit-based browsers (Chrome, Safari, Edge Chromium). Firefox uses different properties like scrollbar-width and scrollbar-color.
Conclusion
Custom scrollbars enhance your website's visual appeal by replacing default browser scrollbars. Use ::-webkit-scrollbar pseudo-elements to control width, colors, and hover effects, though support is limited to Webkit browsers.
Updated on: 2026-03-15T15:01:41+05:30
216 Views
Advertisements