How to Customize Scrollbar Styles with CSS
Default browser scrollbars are functional but visually inconsistent and often clash with custom-designed interfaces — especially dark-themed ones. CSS lets you customize scrollbar width, colors, and shape to match your design. Two approaches cover all modern browsers.
- Style browser scrollbars with CSS.
- Covers webkit scrollbar styling (chrome, edge, safari).
- Covers firefox scrollbar styling.
- Covers cross-browser solution.
- Covers hiding scrollbars (while keeping scroll).
WebKit Scrollbar Styling (Chrome, Edge, Safari)
Chrome, Edge, and Safari support ::-webkit-scrollbar pseudo-elements:
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #0B0D17; }
::-webkit-scrollbar-thumb { background: #1A1D2E; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #2A2D3E; }
This gives you full control over the scrollbar's width, track color, thumb color, border-radius, and hover state.
Firefox Scrollbar Styling
Firefox uses the standard scrollbar-width and scrollbar-color properties:
gap instead of margin hacks for flexbox spacing. It keeps layout code cleaner and is supported in all modern browsers.* {
scrollbar-width: thin;
scrollbar-color: #1A1D2E #0B0D17;
}
scrollbar-width accepts auto, thin, or none. scrollbar-color takes two values: thumb color and track color. Less control than WebKit, but it's the standards-based approach.
Cross-Browser Solution
Combine both approaches for full coverage:
width, height, top, or left. These trigger layout recalculations on every frame and can drop performance below 60fps./* Firefox */
* { scrollbar-width: thin; scrollbar-color: #1A1D2E #0B0D17; }
/* Chrome, Edge, Safari */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0B0D17; }
::-webkit-scrollbar-thumb { background: #1A1D2E; border-radius: 3px; }
The Scrollbar Styler generates this cross-browser CSS with a visual preview.
Hiding Scrollbars (While Keeping Scroll)
To hide scrollbars but keep the content scrollable:
.no-scrollbar { scrollbar-width: none; } /* Firefox */
.no-scrollbar::-webkit-scrollbar { display: none; } /* Chrome */
Use this sparingly — hidden scrollbars remove a visual affordance that tells users the content is scrollable. It works best for horizontal carousels and custom scroll containers where alternative navigation is provided.