Custom scroll bars bridge the gap between browser-native UI and application design language — they transform the default scroll track into a subtle interface element that respects the visual theme. CSS scroll bars achieve this through standard properties that apply consistent styling across modern browsers.
scrollbar-color and scrollbar-width for compact, styled scroll tracks that match the application color palette without vendor-specific pseudo-element overrides.scrollbar-color value update.scrollbar-width: thin on compact interfaces and scrollbar-width: auto on content-heavy views where scroll affordance visibility is critical for navigation.Browse the collection to find a scroll bar style that fits your interface — from thin, minimal scroll tracks for content-focused layouts to themed scroll bars with custom colors matching your design system.
Table of Contents:
This is a Gradient Vertical Scroll Progress Bar. It maps the user’s vertical position to a visual meter along the right edge of the viewport. Its function is to provide an unobtrusive sense of reading progress without cluttering the main content area.
Chrome 61+
Edge 17+
Firefox 64+
Safari 11+See the Pen Gradient Vertical Scroll Progress Bar.
This advanced CSS demo uses @layer for structure and achieves cross-browser scrollbar customization with theme-aware coloring via color-mix and light-dark; it integrates experimental features like CSS Anchoring and the ::scroll-button(*) pseudo-element for customizable scroll arrows, ensuring accessibility through enhanced :focus-visible feedback on the custom thumb.
See the Pen Nice Content Scroller – Lesson Variant.
A scroll progress indicator effect created with a clever CSS trick - a massive box-shadow with a negative offset on ::-webkit-scrollbar-thumb creates the illusion of filling the traversed track as you scroll.
See the Pen Progress Scrollbar CSS Only.
The interface includes a responsive sidebar, a sticky header, and a scrollable grid of cards with custom progress bars and status indicators, ensuring a polished, app-like user experience without relying on JavaScript.
See the Pen Dashboard Layout Design - iPad Pro.
scrollbar-color and scrollbar-width over vendor-prefixed pseudo-elements?
scrollbar-color and scrollbar-width are standard CSS properties that work across Firefox and Chromium-based browsers with a single declaration. Vendor-prefixed pseudo-elements like ::-webkit-scrollbar require separate rules for each engine and may not be supported in future browser versions.
Ensure the custom scroll bar has sufficient contrast with scrollbar-color: thumb track using accessible color values. Never set scrollbar-width: none without providing an alternative scroll mechanism, as this removes scroll functionality entirely for users with reduced mobility.
Use scrollbar-color for thumb and track colors — this is a native property that does not trigger layout recalculations. For rounded thumbs, use border-radius on ::-webkit-scrollbar-thumb in supporting browsers.
Use @media (prefers-color-scheme: dark) and @media (prefers-color-scheme: light) to provide different scrollbar-color values for each theme. Use light-dark() function for automatic theme-aware scroll bar colors in modern browsers.
scrollbar-color?
Detect support with @supports (scrollbar-color: auto). For unsupported browsers, the browser renders its native scroll bar as a fallback, ensuring scroll functionality remains intact without the custom styling.