CSS Scrollbar Generator

Modern Chrome, Edge, Safari, and Opera support the ::-webkit-scrollbar pseudo-elements for full customization. Firefox supports the standardized scrollbar-width and scrollbar-color properties. Internet Explorer does not support scrollbar styling at all. This generator outputs CSS for both WebKit and Firefox so your styles work across all modern browsers.

WebKit browsers (Chrome, Safari, Edge) let you style every scrollbar part independently using pseudo-elements like ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-track, and ::-webkit-scrollbar-corner. You can set custom widths, colors, border radius, borders, and hover states. Firefox uses the simpler scrollbar-color and scrollbar-width properties, which only let you change the thumb color, track color, and overall width (auto, thin, or none). The generator creates both sets of rules automatically.

Yes. Set the Width slider to 0 and choose Firefox Width → none. The generator will output ::-webkit-scrollbar { display: none; } for WebKit and scrollbar-width: none; for Firefox. This hides the visual scrollbar while preserving mouse wheel, touch, and keyboard scrolling. This is commonly used for horizontal image galleries and carousel components.

Mobile browsers, especially on iOS and Android, use overlay scrollbars that appear temporarily while scrolling and then fade away. These overlay scrollbars generally ignore custom CSS styling. The good news is that your CSS won't break anything on mobile — users will simply see the native overlay scrollbar. If you need custom scrollbars on mobile, you typically need a JavaScript library instead of pure CSS.

Yes. The color pickers output hex codes by default, but you can manually edit the generated CSS to use rgba() or hsla() values for transparency. For example, rgba(0, 0, 0, 0.25) creates a semi-transparent black thumb. The macOS preset in this generator uses transparent track colors to achieve the native floating-thumb effect.

Change the CSS Selector field from .custom-scrollbar to any valid CSS selector. Common examples include .sidebar for a navigation panel, #chat-box for a messaging container, or body to style the entire page scrollbar. The generator scopes all generated rules to whatever selector you provide.

Hover state changes the thumb color when the user moves their mouse over it, providing visual feedback that the scrollbar is interactive. Active state changes the thumb color while the user is actively dragging it. These states only work in WebKit browsers — Firefox does not expose hover or active states for scrollbars through the standard properties. You can toggle these states on or off in the generator to include or exclude them from the output.

Scrollbar buttons are the small arrow buttons at the top and bottom (or left and right) ends of a scrollbar. They let users scroll by clicking rather than dragging. WebKit browsers support styling these buttons with ::-webkit-scrollbar-button, but they are hidden by default in most modern designs. The generator lets you enable them and set custom colors for their default, hover, and active states.

No. Custom scrollbar CSS has negligible impact on rendering performance. The styles are pure CSS pseudo-elements and properties — no JavaScript, no animations, no repaints beyond what the browser already does for native scrollbars. The only consideration is that very thick scrollbars (width > 20px) consume more layout space, which could affect container sizing in rare cases.

Firefox's scrollbar-color and scrollbar-width properties do not support border radius, borders, or hover states. This is a limitation of the CSS specification, not the generator. If you need rounded scrollbar thumbs in Firefox, there is currently no pure-CSS solution — you would need a JavaScript custom scrollbar library. The generator still outputs the standard Firefox properties so your colors and width are consistent, while WebKit browsers render the full visual design.

Technically yes for WebKit browsers — you can add transition: background 0.2s ease to ::-webkit-scrollbar-thumb. However, this is generally discouraged because scrollbar pseudo-elements are non-standard and transition support varies. The generator does not include transitions by default to keep the output safe and predictable. If you want animated scrollbars, add the transition property manually after copying the CSS.

The scrollbar corner is the small square where a vertical scrollbar and a horizontal scrollbar meet, typically in the bottom-right corner of a scrollable container. By default it inherits the track color. The generator lets you set a custom color for this corner using the Corner Color control, which maps to the ::-webkit-scrollbar-corner pseudo-element.

Yes. The generator produces clean, well-formatted CSS with proper indentation and optional section comments. It only includes properties you have actually customized, avoiding unnecessary declarations. The output follows current best practices: it uses the standard scrollbar-* properties alongside the WebKit fallback for maximum compatibility. You can paste the code directly into your stylesheet, CSS-in-JS solution, or component scoped styles.