// build styled scrollbars with live preview
Build custom CSS scrollbars with live preview. Control track color, thumb color, hover state, size, border-radius, and export clean cross-browser CSS instantly.
Start with a preset — Dark, Light, Minimal, Accent, or Glass — then fine-tune from there.
Set width, track/thumb colors with opacity, hover color, and border radius using the sliders.
Pick a target selector, toggle output formats, and copy the generated CSS into your project.
The CSS Scrollbar Generator lets you visually design custom scrollbars and export clean, cross-browser CSS. It generates both the modern scrollbar-color / scrollbar-width standard and the ::-webkit-scrollbar pseudo-element syntax used by Chrome, Edge, and Safari.
The scrollbar-color and scrollbar-width properties are supported in Firefox and Chrome 121+. The ::-webkit-scrollbar pseudo-elements work in Chrome, Edge, Opera, and Safari. This tool outputs both formats for maximum compatibility.
Set the width to the minimum (4px) and set both track and thumb colors to transparent (alpha = 0). Alternatively, use scrollbar-width: none in Firefox or ::-webkit-scrollbar { display: none; } for WebKit browsers.
It determines which element's scrollbar gets styled. Using * targets all scrollable elements globally. You can also target a specific container like .sidebar or #main-content to scope the styles to one area of the page.
Mobile browsers (iOS Safari, Android Chrome) largely ignore custom scrollbar styles and show their native overlay scrollbars. Custom scrollbars via CSS primarily apply to desktop browsers. For mobile control, consider a JavaScript custom scrollbar library.
The scrollbar-color CSS property is part of the CSS Scrollbars Specification (Level 1). It accepts two color values: the first for the thumb and the second for the track. Combined with scrollbar-width, it provides a simpler alternative to the WebKit pseudo-elements.
Firefox supports the standard scrollbar-color / scrollbar-width properties but does not support ::-webkit-scrollbar pseudo-elements. The live preview uses injected styles — if you're on Firefox, enable the "scrollbar-color" toggle for the standard output to see the preview update.
Custom scrollbars are one of the most underappreciated UI details in web development. When done well, a styled scrollbar can feel like a natural extension of your design system — a subtle signal to users that every detail has been considered. When ignored, the default system scrollbar can look jarringly out of place in polished UIs. This CSS Scrollbar Generator gives you a fast, visual way to craft beautiful scrollbars and export clean, production-ready CSS.
💡 Looking for premium CSS templates and UI kits? MonsterONE offers unlimited downloads of templates, UI kits, and assets — worth checking out.
There are currently two approaches to styling scrollbars in CSS. The first is the WebKit pseudo-element API — a non-standard but widely supported approach using ::-webkit-scrollbar, ::-webkit-scrollbar-track, and ::-webkit-scrollbar-thumb. This gives fine-grained control over size, color, radius, shadows, and hover states, and works in Chrome, Edge, Opera, and Safari.
The second is the CSS Scrollbars Level 1 specification, which introduces scrollbar-color and scrollbar-width as standard properties. These are supported in Firefox and in Chrome 121+. They're simpler — two color values for the thumb and track, and a keyword for width — but they're the future-proof, standards-compliant approach.
This tool generates both, so you get maximum browser coverage in a single copy-paste.
Here are some common design approaches and what settings produce them:
It's important to understand the support landscape before deploying custom scrollbars:
::-webkit-scrollbar pseudo-elements and (from Chrome 121+) the standard scrollbar-color / scrollbar-width properties.scrollbar-color and scrollbar-width properties. Does not support WebKit pseudo-elements.::-webkit-scrollbar on macOS. iOS Safari ignores custom scrollbar styles entirely (overlay scrollbars).The safest approach for broad compatibility is to include both the WebKit pseudo-element block and the standard property block, as this generator produces. Browsers will use whichever format they support and ignore the other.
While there's no WCAG criterion that specifically governs scrollbar appearance, some best practices apply:
For design systems, it's often better to drive scrollbar colors through CSS custom properties (variables) rather than hard-coding values. For example:
:root {
--scrollbar-track: #1a1a1a;
--scrollbar-thumb: #444;
--scrollbar-thumb-hover: #c8f135;
}
*::-webkit-scrollbar-track {
background: var(--scrollbar-track);
}
*::-webkit-scrollbar-thumb {
background-color: var(--scrollbar-thumb);
}
*::-webkit-scrollbar-thumb:hover {
background-color: var(--scrollbar-thumb-hover);
}This approach makes it trivial to swap scrollbar themes at runtime (for dark/light mode toggles) without duplicating selector blocks.
Choosing the right selector scope is crucial for predictable results. The * (universal) selector applies styles to all scrollable elements on the page — useful for a consistent look throughout the app. Using html or body targets the main page scroll. For more targeted control, apply styles to specific containers: .modal, .sidebar, #code-editor, or any element with overflow: auto or overflow: scroll.