CSS Scrollbar Generator
Design a custom colored scrollbar with live preview and copy the CSS — WebKit and Firefox compatible.
732 views
This area is for testing your custom scrollbar. Scroll down and watch the bar on the right follow your design. Change colors and sizes; the result applies to this box instantly.
This area is for testing your custom scrollbar. Scroll down and watch the bar on the right follow your design. Change colors and sizes; the result applies to this box instantly.
This area is for testing your custom scrollbar. Scroll down and watch the bar on the right follow your design. Change colors and sizes; the result applies to this box instantly.
This area is for testing your custom scrollbar. Scroll down and watch the bar on the right follow your design. Change colors and sizes; the result applies to this box instantly.
This area is for testing your custom scrollbar. Scroll down and watch the bar on the right follow your design. Change colors and sizes; the result applies to this box instantly.
This area is for testing your custom scrollbar. Scroll down and watch the bar on the right follow your design. Change colors and sizes; the result applies to this box instantly.
How Are Scrollbars Styled with CSS?
Two mechanisms exist: WebKit browsers (Chrome, Edge, Safari) use the ::-webkit-scrollbar pseudo-element family, letting you style track, thumb, width and radius; Firefox uses the simpler standard properties scrollbar-color and scrollbar-width. The generated code includes both, so your scrollbar looks consistent everywhere.
Adjust colors, width and radius; the preview pane on the right scrolls with your design applied, and the CSS updates instantly.
Frequently Asked Questions
Why does my scrollbar look different in Firefox?
Firefox ignores ::-webkit-scrollbar rules and only honors scrollbar-color (thumb + track colors) and scrollbar-width. Radius and hover effects are WebKit-only; Firefox shows a simplified version.
Can I style just one element's scrollbar?
Yes — scope the selectors: .my-box::-webkit-scrollbar { … } and .my-box { scrollbar-color: … }. Apply to html or body (or use the bare selectors from this generator) for the whole page.
Do custom scrollbars work on mobile?
Mostly not: iOS and most Android browsers use overlay scrollbars that ignore these styles. Treat custom scrollbars as a desktop enhancement.
Similar Tools
Report a Problem
CSS Scrollbar Generator