CSS Scrollbar Styler
Create custom CSS scrollbar styles with visual controls.
Reviewed by Aygul Dovletova · Last reviewed
/* Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888888;
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
background: #555555;
}
/* Firefox */
* {
scrollbar-width: auto;
scrollbar-color: #888888 #f1f1f1;
}Styling Your Scrollbar
- Set the scrollbar width with the slider. This maps to
::-webkit-scrollbar { width: ... }for WebKit/Blink browsers. Firefox uses the coarserscrollbar-width: thin | auto | nonekeyword instead. - Pick the track color (the rail the thumb moves along). Generated as
::-webkit-scrollbar-track { background: ... }and as the second value of Firefox\'sscrollbar-color. - Pick the thumb color (the draggable part). Generated as
::-webkit-scrollbar-thumb { background: ... }and as the first value of Firefox\'sscrollbar-color. - Set the thumb hover color for desktop-browser feedback on mouse-over. Only WebKit supports this directly; Firefox scrollbars don\'t expose a hover state.
- Adjust thumb border-radius to soften the thumb\'s corners.
- Scroll the preview area to see the live styled scrollbar, then click Copy CSS to pull out both the WebKit pseudo-element rules and the Firefox
scrollbar-*properties.
Two different APIs under the hood
Scrollbar customization is one of the messier corners of CSS because browsers implement it in two incompatible ways. WebKit and Blink (Safari, Chrome, Edge, Opera, and every Chromium-based embedded browser) expose a set of non-standard pseudo-elements: ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-button, plus ::-webkit-scrollbar-corner for the little square where horizontal and vertical scrollbars meet. These give you fine-grained control over width, color, gradients, borders, shadows, and hover/active states.
Firefox never implemented those pseudo-elements. Instead, it shipped the CSS Scrollbars Module Level 1 properties - scrollbar-width and scrollbar-color - which offer far less control: a three-value width keyword (auto | thin | none) and a single scrollbar-color: <thumb> <track> declaration with no hover state, no border-radius, no custom widths, and no support for gradients. The W3C standardized Firefox\'s approach in CSS Scrollbars Level 1; Safari and Chrome added support for it in 2023-2024 (Safari 18, Chrome 121), so the standard properties now work in every browser alongside the WebKit pseudo-elements. The generator writes both so your styling degrades gracefully: WebKit browsers get the full look via pseudo-elements, Firefox gets the simpler but still-themed version via the standard properties.
When styled scrollbars make sense
- Dark-mode themes where the default chrome scrollbar looks jarringly light.
- Narrow sidebars where the default 15-17px scrollbar dominates the layout.
- Branded product apps that want scrollbar accent colors matching the design system.
- Chat and email interfaces where subtle translucent scrollbars reduce visual noise.
- Kiosk and TV display apps where the default scrollbar looks unprofessional.
- Code editor embeds on documentation pages - custom scrollbars match the editor chrome.
Pitfalls and accessibility caveats
- Don\'t hide the scrollbar completely on scrollable containers. It\'s a critical affordance for keyboard users, screen-magnifier users, and mouse users with trackpads that don\'t auto-show scrollbars. If you set
::-webkit-scrollbar { display: none }, the container looks un-scrollable even when it isn\'t - a major WCAG failure. - Mobile browsers use overlay scrollbars that auto-hide. iOS Safari and Chrome on Android render scrollbars as floating overlays that appear only during scrolling. Most scrollbar styling has no visible effect on mobile - don\'t invest heavily in hover states that only desktop users will ever see.
- Low contrast thumb-to-track breaks accessibility. WCAG Success Criterion 1.4.11 "Non-text Contrast" requires a 3:1 contrast ratio between UI components and their background. A thumb that\'s nearly the same shade as the track may look elegant but fails the standard. Run the thumb and track colors through a contrast checker.
- Very thin scrollbars are hard to grab. Scrollbars below 8px wide become difficult to hit with a trackpad and impossible with an imprecise pointer. Apple\'s HIG recommends 10-15px; Microsoft\'s Fluent minimum is 12px.
- Custom scrollbars can break native-feel on macOS. macOS users expect overlay scrollbars that fade in and out; a permanent custom scrollbar feels foreign. Use
@media (hover: none) and (pointer: coarse)to skip styling on touch devices. - Scrollbar styling only applies to overflow: auto/scroll containers. The root
<html>element scrollbar is special: Chromium respectshtml::-webkit-scrollbar, Safari respects it only partially, and Firefox useshtml { scrollbar-color: ... }.
Spec background
The ::-webkit-scrollbar pseudo-element family is a WebKit extension from roughly 2009 that was never standardized. The CSS Scrollbars Module Level 1 is the proper standard, adding scrollbar-width and scrollbar-color plus the later scrollbar-gutter property that reserves space for scrollbars even when scrolling isn\'t needed. Firefox shipped the standard first; Chrome 121 and Safari 18 added support in 2023-2024. For now you need to ship both - WebKit pseudo-elements for fine-grained control on Chromium/Safari, standard properties for Firefox. caniuse.com/css-scrollbar-color and caniuse.com/css-scrollbar-width track the standard properties.
Customization vs leaving it alone
Styled scrollbars are a small polish that can sharpen a product\'s visual identity, but there\'s a real argument for leaving the native chrome alone. Native scrollbars auto-adapt to OS dark mode, expose accessibility affordances that custom styling breaks, and behave consistently across every app on the user\'s device. If your product targets desktop-power users (developer tools, design software, spreadsheets), keeping native scrollbars reinforces "this is a real app". Compared to JavaScript scrollbar libraries (PerfectScrollbar, SimpleBar, OverlayScrollbars), CSS-only scrollbar styling has far better performance and accessibility - the native scrollbar still handles keyboard, focus, and screen-reader integration. JavaScript libraries typically re-implement the scrollbar and often break keyboard scrolling or wheel events subtly. Stick with CSS unless you genuinely need features the native scrollbar can\'t provide.
Frequently Asked Questions
Why does scrollbar styling look different in Firefox and Chrome?
Because the two engines implement fundamentally different APIs. Chrome and Safari use the non-standard <code>::-webkit-scrollbar</code> pseudo-element family, which lets you control width in pixels, multiple colors (including hover states), border-radius, gradients, and shadows. Firefox uses the W3C standard <code>scrollbar-width</code> and <code>scrollbar-color</code> properties, which only offer three widths (<code>auto</code>, <code>thin</code>, <code>none</code>) and a single thumb/track color pair with no hover state. The generator outputs both so the effect degrades gracefully between browsers.
What happens if I set scrollbar-width: none?
Both Firefox (via <code>scrollbar-width: none</code>) and WebKit (via <code>::-webkit-scrollbar { display: none }</code>) will hide the scrollbar entirely while keeping the element scrollable - wheel, touch, and keyboard scrolling still work. However, hiding the scrollbar removes a critical visual affordance for users who don't know the content scrolls. WCAG considers invisible scrollbars a usability regression; use <code>scrollbar-gutter: stable</code> plus a very thin semi-transparent scrollbar instead of fully hiding it.
Does custom scrollbar CSS work on iOS and Android?
Mostly not. Both iOS Safari and Chrome on Android render scrollbars as floating overlay indicators that appear only during scrolling and auto-dismiss within a second. The WebKit pseudo-elements have limited effect on iOS - colors may apply, but width and hover states are ignored. Most of your scrollbar styling is desktop-only; design accordingly. Use <code>@media (hover: hover)</code> to scope styling to devices with precise pointers.
Does this tool track my color picks?
No. The track color, thumb color, hover color, width, and border-radius values live in Preact component state in your browser. The generator builds the CSS string with template literals and injects it into a local <code><style></code> block scoped to the preview area. There is no API call tied to the color pickers.
How do I keep a stable layout when scrollbars appear and disappear?
Use <code>scrollbar-gutter: stable</code> (or <code>stable both-edges</code>) on the scrolling container. When applied, the browser reserves space for the scrollbar even when content fits without scrolling, so text doesn't shift as overflow appears. This property is part of CSS Overflow Module Level 4 and is supported in Chrome 94+, Firefox 97+, and Safari 17+.
Can I use gradients and images for my scrollbar thumb?
On WebKit, yes - <code>::-webkit-scrollbar-thumb</code> accepts any CSS <code>background</code> value, including linear gradients, radial gradients, and background images. Firefox's <code>scrollbar-color</code> accepts only a solid color value - no gradients, no images - so the effect will differ between browsers.
What width should a scrollbar be?
Apple's HIG and Microsoft's Fluent design system both recommend 10-15px for mouse users. Below 8px, scrollbars become difficult to click or drag accurately, especially on lower-DPI displays. WCAG 2.2 Success Criterion 2.5.5 "Target Size (Enhanced)" calls for at least 44x44 CSS pixels for interactive targets; for accessibility-first designs, stay at 12-16px.
Are custom scrollbars accessible?
They can be, if you maintain sufficient contrast between thumb and track (WCAG 1.4.11 Non-text Contrast requires 3:1), keep the scrollbar at a usable width (10px minimum), and never hide the scrollbar on a scrollable element. Users with tremors, reduced motor control, or visual impairments rely on scrollbars being both visible and big enough to target.
Does this generator output the standard scrollbar-color property?
Yes. The generated CSS includes both the WebKit pseudo-element rules and the standard <code>scrollbar-width</code> plus <code>scrollbar-color</code> from CSS Scrollbars Module Level 1. Chromium 121 and Safari 18 now support the standard properties; when both are present the pseudo-element rules take precedence on those browsers. Firefox reads only the standard properties.
More CSS & Design
Aspect Ratio Calculator
Calculate and visualize aspect ratios for any dimensions.
Open toolBlob Shape Generator
Generate organic blob shapes as SVG.
Open toolBorder Radius Generator
Create CSS border-radius with a visual corner editor.
Open toolCSS Box Shadow Generator
Create CSS box shadows with a visual editor. CSS box-shadow generator, shadow maker and box-shadow builder with live preview, multi-layer support and Material elevation presets.
Open toolColor Palette Generator
Generate harmonious color palettes, Tailwind-style 50-900 scales and design-system tokens from any base hex color. Also a hex color palette generator (Farbpalette Generator auf Deutsch).
Open toolColor Picker
Pick colors visually and get HEX, RGB, and HSL values.
Open tool