CSS Scrollbar Styler
/* Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: #e5e7eb;
border-radius: 5px;
}
::-webkit-scrollbar-thumb {
background: #6366f1;
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
background: #4f46e5;
}
/* Firefox */
* {
scrollbar-width: auto;
scrollbar-color: #6366f1 #e5e7eb;
}What is CSS Scrollbar Styler?
CSS Scrollbar Styler lets you customize the appearance of browser scrollbars to match your website design. This free generator creates CSS code for styling scrollbar width, track color, thumb (handle) color, and border radius. Custom scrollbars can significantly improve the visual consistency of your web application, especially for dark themes or branded experiences. Our generator supports webkit scrollbar properties which work in Chrome, Edge, Safari, and other Chromium-based browsers. Firefox uses a simplified scrollbar-color and scrollbar-width property. The tool generates both webkit and Firefox-compatible code for maximum browser support.
How to Use This Tool
Choose a thumb (handle) color that complements your design
Set the track background color (usually subtle)
Adjust the width to your preference (8-12px is common)
Add border radius for a modern rounded look
Enable hover effect for interactive scrollbars
Preview the scrollbar in the demo area by scrolling
Copy the generated CSS code to your stylesheet
Features
- Customize scrollbar thumb (handle) color
- Set scrollbar track background color
- Adjust scrollbar width from thin to thick
- Add border radius for rounded scrollbars
- Add hover effects for interactive feel
- Generate webkit and Firefox compatible CSS
- Real-time preview of scrollbar appearance
- One-click copy CSS code
Frequently Asked Questions
- How do I style a scrollbar with CSS?
Use ::-webkit-scrollbar pseudo-elements for Chrome/Safari/Edge. Set ::-webkit-scrollbar for width, ::-webkit-scrollbar-track for background, and ::-webkit-scrollbar-thumb for the handle. Firefox uses scrollbar-color and scrollbar-width properties.
- Does custom scrollbar CSS work in all browsers?
Webkit scrollbar styling works in Chrome, Edge, Safari, and Opera. Firefox supports scrollbar-color and scrollbar-width (limited customization). Internet Explorer has -ms-overflow-style but with limited options. Always provide fallbacks.
- What is a good scrollbar width?
Default scrollbars are about 17px. For custom styling, 8-12px is common for a modern, subtle look. Use 6px or less for minimal scrollbars. Consider usability - very thin scrollbars can be hard to grab on touch devices.
- How do I hide the scrollbar but keep scrolling?
Use ::-webkit-scrollbar { display: none; } for webkit browsers and scrollbar-width: none; for Firefox. The content will still be scrollable. Note this can hurt accessibility as users may not realize content is scrollable.
- Can I add hover effects to scrollbars?
Yes, use ::-webkit-scrollbar-thumb:hover to change the thumb color on hover. This provides visual feedback and improves usability. You can also style :active for when the scrollbar is being dragged.
- How do I style scrollbars for a specific element?
Target the element before the scrollbar pseudo-element: .my-container::-webkit-scrollbar { ... }. This lets you have different scrollbar styles for different scrollable areas on the same page.