How to Create Custom Scrollbar in CSS
Learn to style scrollbars with CSS using webkit pseudo-elements and Firefox properties. Cross-browser examples included.
Why Style Your Scrollbars?
Custom scrollbars can significantly improve your website's visual consistency and user experience. Here's what you can customize:
- Width and size - Make scrollbars thin, thick, or completely hidden
- Colors - Match your brand colors for the track and thumb
- Border radius - Create rounded, pill-shaped scrollbars
- Hover states - Add interactive feedback on hover
Live demo - scroll inside:
Item 1
Scroll to see the custom scrollbar in action
Item 2
Scroll to see the custom scrollbar in action
Item 3
Scroll to see the custom scrollbar in action
Item 4
Scroll to see the custom scrollbar in action
Item 5
Scroll to see the custom scrollbar in action
Item 6
Scroll to see the custom scrollbar in action
Item 7
Scroll to see the custom scrollbar in action
Item 8
Scroll to see the custom scrollbar in action
Item 9
Scroll to see the custom scrollbar in action
Item 10
Scroll to see the custom scrollbar in action
Step-by-Step Tutorial
Follow these steps to create a custom scrollbar. Click any code block to copy.
Target the Scrollbar
Use the ::-webkit-scrollbar pseudo-element to target the entire scrollbar. Set the width for vertical scrollbars and height for horizontal ones.
Style the Track
The track is the background area where the thumb moves. Style it with ::-webkit-scrollbar-track.
Style the Thumb
The thumb is the draggable handle. Use ::-webkit-scrollbar-thumb and add hover states for interactivity.
Add Firefox Support
Firefox uses standard CSS properties: scrollbar-width and scrollbar-color. Limited customization compared to WebKit.
Complete Cross-Browser Code
Here's the complete CSS for a custom scrollbar that works in all modern browsers:
Scrollbar Style Examples
Click any style to copy the CSS. Each example includes both WebKit and Firefox support.
Hide Scrollbar (Keep Scrolling)
Sometimes you want to hide the scrollbar but keep the content scrollable:
Accessibility note: Hidden scrollbars can confuse users who rely on them for navigation. Consider adding visual cues that content is scrollable.
Browser Support
| Property | Chrome | Safari | Firefox | Edge |
|---|---|---|---|---|
::-webkit-scrollbar | Yes | Yes | No | Yes |
scrollbar-width | 121+ | No | 64+ | 121+ |
scrollbar-color | 121+ | No | 64+ | 121+ |
For full cross-browser support, include both WebKit pseudo-elements and standard scrollbar properties.
Frequently Asked Questions
WebKit browsers (Chrome, Safari, Edge) support extensive customization via ::-webkit-scrollbar pseudo-elements. Firefox supports scrollbar-width and scrollbar-color properties for basic styling. Internet Explorer/Edge legacy support -ms-overflow-style for hiding scrollbars only.
Use ::-webkit-scrollbar { display: none; } for WebKit browsers and scrollbar-width: none; for Firefox. Add -ms-overflow-style: none; for older Edge/IE. The element will still be scrollable.
The track is the background/gutter where the scrollbar moves. The thumb is the draggable handle that users interact with to scroll. In CSS, style them with ::-webkit-scrollbar-track and ::-webkit-scrollbar-thumb respectively.
Make sure your element has overflow: auto or overflow: scroll set. The ::-webkit-scrollbar pseudo-elements only work when content overflows. Also ensure you've set a width for vertical scrollbars or height for horizontal ones.
Custom scrollbars can be problematic if they're too thin or have poor contrast. Keep scrollbars at least 8-10px wide, ensure good color contrast between thumb and track, and consider adding hover states for better visibility.
More CSS Tutorials
Copy CSS from Website
Extract styles with 2 clicks
Center a Div (CSS)
Flexbox, Grid, and more
Center a Div (Tailwind)
Utility classes for centering
Convert CSS to Tailwind
CSS to utility classes
Glassmorphism Effect
Frosted glass UI style
Neumorphism Button
Soft UI button design
Responsive Navbar
Mobile-friendly navigation
Sticky Header
Fixed navigation on scroll
CSS Pagination
Page navigation styles
CSS Accordion
Expandable content sections
Dropdown Menu
Hover and click dropdowns
CSS Modal
Popup dialog boxes
Toast Notifications
Animated alert messages
Hamburger Menu
Animated menu icon
Animate Gradients
Moving gradient backgrounds
Skeleton Loader
Loading placeholder UI
Element Screenshot
Capture any element as image
Pick Color from Website
Eyedropper tool comparison
Identify Fonts
Find fonts on any website
Download All Images
Bulk save images from any site
Measure Elements
Page ruler and measurements
Extract Colors from Website
Get any color palette instantly
Dark Mode Toggle
CSS variables and localStorage
Responsive Grid
CSS Grid auto-fit and minmax
Center Text in CSS
text-align, Flexbox, and Grid
Make Text Bold
font-weight values explained
Add Shadow in CSS
box-shadow, text-shadow, drop-shadow
Round Corners in CSS
border-radius and pill shapes
Style File Input
Custom upload buttons