Advanced UI Tutorial
Modern Custom Scrollbar with CSS
Enhance your website's scrolling experience with beautiful custom Webkit scrollbars.
🚀 Real-Time Preview
Scroll me!
A custom scrollbar is more than just a color; it's a statement of quality.
This demo uses the
You can customize the width, background, and border-radius to match your brand colors like we did at FAMOUSCODE.DEV.
Keep scrolling to see the smoothness. Works perfectly on Chrome, Brave, and Microsoft Edge.
A custom scrollbar is more than just a color; it's a statement of quality.
This demo uses the
-webkit-scrollbar property to create a floating thumb effect. You can customize the width, background, and border-radius to match your brand colors like we did at FAMOUSCODE.DEV.
Keep scrolling to see the smoothness. Works perfectly on Chrome, Brave, and Microsoft Edge.
💻 Production-Ready Code
GLOBAL_STYLE.CSS
/* 1. Scrollbar Container */
::-webkit-scrollbar {
width: 12px;
}
/* 2. Scrollbar Track (Path) */
::-webkit-scrollbar-track {
background: #f1f5f9;
border-radius: 10px;
}
/* 3. Scrollbar Thumb (Handle) */
::-webkit-scrollbar-thumb {
background: #3498db;
border-radius: 10px;
border: 3px solid #f1f5f9; /* Gap effect */
}
/* 4. Hover State */
::-webkit-scrollbar-thumb:hover {
background: #2980b9;
}💡 Pro Tip for Designers:
Adding a border to the thumb that matches the track color creates a "padding" effect, making the scrollbar look professional and clean.