CSS Scrollbar Styler - Custom Scrollbar Generator
Color Tools
Design a custom CSS scrollbar with live preview. Control width, track color, thumb color, hover color, and border-radius. Generates webkit and Firefox CSS ready to copy.
Preview
/* Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 0px;
}
::-webkit-scrollbar-thumb {
background: #888888;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #555555;
}
/* Firefox */
* {
scrollbar-width: auto;
scrollbar-color: #888888 #f1f1f1;
}How to use this tool
- Adjust width, colors, and radius to design your scrollbar.
- Scroll the preview box on the right to see it live.
- Copy the CSS and add it to your stylesheet.
CSS scrollbar properties
Two separate CSS approaches cover the major browsers. Webkit-based browsers (Chrome, Edge,
Safari) use a family of pseudo-elements: ::-webkit-scrollbar,
::-webkit-scrollbar-track, and ::-webkit-scrollbar-thumb. Firefox
uses the simpler standard properties scrollbar-width and
scrollbar-color.
Scoping to a specific container
By default the generated CSS targets all scrollable elements (*). To scope it to
a single container, replace * with your element's selector:
.my-container::-webkit-scrollbar { width: 8px; }
.my-container { scrollbar-color: #888 #f1f1f1; }Standard vs. non-standard CSS scrollbars
The CSS Scrollbars Styling Module Level 1 defines two standard properties:
scrollbar-width (values: auto, thin, none)
and scrollbar-color (thumb and track colors). These are now supported in Chrome 121+,
Edge 121+, and Firefox. The ::-webkit-scrollbar family of pseudo-elements is a non-standard
extension that originated in WebKit/Blink and offers more granular control (size, border-radius,
box-shadow on the thumb), but it is not part of any CSS specification. For maximum compatibility,
generate both the standard properties and the WebKit pseudo-elements.
Scrollbar overlay vs. classic
On macOS (and iOS), scrollbars are overlay scrollbars by default: they float on top of content and don't occupy layout space. They appear only when scrolling and then fade out. On Windows, scrollbars are classic (guttered): they permanently consume layout space equal to their width (typically 15–17 px).
The scrollbar-gutter CSS property (set to stable) reserves space for
the scrollbar even when it's not visible - preventing layout shifts when content overflows.
This is particularly useful for fixed-width containers that switch between scrollable and
non-scrollable states.
Accessibility caution
Custom scrollbars that are very narrow (under 4 px) or have low-contrast colors can fail WCAG 1.4.11 (Non-text Contrast), which requires a minimum 3:1 contrast ratio between UI components and their adjacent colors. A very thin scrollbar thumb on a same-color track is a common failure. Test your custom scrollbar colors in a contrast checker before deploying.
Frequently asked questions
Does the generated CSS work in all browsers?
The ::-webkit-scrollbar pseudo-elements work in Chrome, Edge, and Safari. Firefox uses the standard scrollbar-width and scrollbar-color properties. The generated CSS includes both approaches.
How do I apply the scrollbar only to a specific element?
Replace the * selector with your element's selector. For example: .my-container::-webkit-scrollbar { … } and .my-container { scrollbar-color: … }
Related tools
- Scroll PlaygroundTest the styled scrollbar alongside scroll snapping and overflow behavior.
- Contrast CheckerCheck thumb and track separation for users who rely on visible scroll controls.
- Gradient GeneratorCreate a gradient treatment for a custom thumb or track.
- Border RadiusTune the rounded thumb and track ends used by the scrollbar style.