CSS Scrollbar Styler

Controls

Preview & CSS

Scroll to preview the custom scrollbar style. This is some example content to make the box scrollable.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 
   
 
Note: webkit scrollbar styles work in Chrome/Edge/Safari. Firefox uses scrollbar-color + scrollbar-width.
 
 
   
 
 
 
How to Use
 
     
  1. Set scrollbar width — Choose thin, auto, or a custom pixel value to size the scrollbar track.
    2.  
  2. Pick thumb color — Select the color for the draggable scrollbar handle.
    3.  
  3. Pick track color — Set the background color of the scrollbar rail.
    4.  
  4. Copy CSS — Click "Copy CSS" to get the complete scrollbar styling rules ready for your stylesheet.
    5.  
 
 
 
What Is CSS Scrollbar Styling?
 
CSS scrollbar styling lets you customize the appearance of scrollbars using ::-webkit-scrollbar pseudo-elements for Chromium/Safari, and the standard scrollbar-color and scrollbar-width properties for Firefox.
 
Custom scrollbars improve visual consistency with your design system. They are purely cosmetic — the scrollbar's functionality and accessibility remain unchanged.
 
 
 
Common Use Cases
 
 
Dark mode interfaces
 
Custom chat windows
 
Code editors / terminals
 
Branded dashboards
 
Overflow sidebars
 
Horizontal scroll galleries
 
 
Tips & Best Practices
 
 
 Cross-browser approach 
Include both ::-webkit-scrollbar rules for Chrome/Safari and scrollbar-color/scrollbar-width for Firefox to cover all major browsers.
 
 
 Contrast matters 
Ensure sufficient contrast between thumb and track colors. Low contrast makes it hard to see the scrollbar position, especially for users with low vision.
 
 
 Thin scrollbars 
Use scrollbar-width: thin or a width of 6–8px for modern, minimal UIs that don't distract from content.
 
 
 Scoped styling 
Apply scrollbar styles to a specific container class rather than body to avoid overriding browser defaults globally.
 
 
 
Frequently Asked Questions
 
 
Do custom scrollbars work in all browsers?
 
The ::-webkit-scrollbar pseudo-elements work in Chrome, Edge, and Safari. Firefox uses the standard scrollbar-color and scrollbar-width properties. Including both covers the vast majority of users.
 
 
 
Can I hide the scrollbar but keep scrolling?
 
Yes. Set scrollbar-width: none (Firefox) and ::-webkit-scrollbar { display: none; } (Chrome/Safari) while keeping overflow: auto.
 
 
 
Does scrollbar styling affect accessibility?
 
Styling does not remove scroll functionality. However, very low contrast or invisible scrollbars can confuse users. Always maintain a visible thumb when content overflows.
 
 
 
Can I style only the horizontal scrollbar?
 
Yes. With ::-webkit-scrollbar you can target :horizontal and :vertical pseudo-classes to style each axis independently.