Web features: [scrollbar-color](https://webstatus.dev/features/scrollbar-color) [scrollbar-width](https://webstatus.dev/features/scrollbar-width) > [!NOTE] > **Note:** These guides are authored for AI coding agents (apologies for the robotic tone!). To have your coding agent adopt these patterns automatically, check out [Modern Web Guidance](https://github.com/GoogleChrome/modern-web-guidance). You can customize the appearance of scrollbars using the standard CSS properties `scrollbar-color` and `scrollbar-width`. - **`scrollbar-color`** : Accepts two `` values. The first applies to the thumb (the moving part), and the second to the track (the fixed background). - **`scrollbar-width`** : Accepts `auto` (default), `thin` (a thinner variant), or `none` (hides the scrollbar completely while maintaining scrollability). ## Apply `scrollbar-color` and `scrollbar-width` MANDATORY: Use `scrollbar-color` and `scrollbar-width` on the scrollable container. Choose a thumb color with a contrast ratio of at least 3:1 against the track color, and against the container's background where the track may be transparent, such as with macOS overlay scrollbars, so users can see the thumb and how far they've scrolled (WCAG 1.4.11 Non-text Contrast). When using `scrollbar-color`, use CSS variables to keep thumb and track colors separate, for readability and maintainability (especially when using fallbacks). ```css .scroller { --scrollbar-thumb: var(--color-neutral-70); --scrollbar-track: var(--color-neutral-90); scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } ``` ## Fallback strategies ### Fallbacks \& browser support for scrollbar-color This feature is progressive enhancement and does not always require fallbacks. If the styling is important and the user's Baseline target is "Baseline Widely Available" or earlier, you SHOULD include the non-standard `::-webkit-scrollbar` pseudo-elements as fallbacks. Wrap legacy fallbacks in an `@supports not (scrollbar-color: auto)` block to prevent conflicts between standard properties and legacy WebKit selectors in browsers that support both natively. If you are using custom properties to define colors, these will cascade to the legacy WebKit selectors automatically. You do NOT need to duplicate them. ```css /* Legacy fallback for WebKit/Blink browsers */ @supports not (scrollbar-color: auto) { .scroller::-webkit-scrollbar { /* Must define base size in WebKit for custom colors to be visual */ width: 12px; height: 12px; } .scroller::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); } .scroller::-webkit-scrollbar-track { background: var(--scrollbar-track); } } ``` Source: [customize-scrollbar-color-and-thickness guide on GitHub](https://github.com/GoogleChrome/modern-web-guidance-src/blob/main/guides/visual-design/customize-scrollbar-color-and-thickness/guide.md)