Use the CSS Scrollbar Generator to design a custom-styled scrollbar and get copy-paste CSS in seconds — no signup required.
Every browser ships a default scrollbar: a gray track and a gray thumb that ignore your site’s brand colors. This tool lets you set the track color, thumb color, hover state, width, and corner radius, then generates working CSS for both Chrome/Edge/Safari (::-webkit-scrollbar) and Firefox (scrollbar-color / scrollbar-width), scoped to whatever selector you enter — body, a specific div, or a WordPress theme container.
Quick presets
Target element
Track
Thumb
Extra options
Live preview
Scroll inside this box
This preview panel shows exactly how your custom scrollbar will look and behave. Scroll down to see the full track and thumb styling in action.
Custom scrollbars are a small detail, but they carry a lot of weight in how polished a WordPress site or web app feels. A scrollbar that matches your brand colors instead of the browser default is one of those details clients notice even if they can’t say exactly why.
Chrome, Edge, and Safari support the ::-webkit-scrollbar family of pseudo-elements, which is what gives you full control over track color, thumb color, width, and corner radius.
Firefox uses a different, more limited set of properties: scrollbar-width and scrollbar-color. This tool generates fallback rules for Firefox automatically so your scrollbar degrades gracefully instead of breaking.
Keep scrolling to see how the thumb behaves near the bottom of a long container, and try hovering over the thumb to preview the hover color.
When you’re happy with the look, copy the generated CSS from the panel on the right and paste it into your stylesheet or a Custom HTML block.
That’s the end of the preview content — scroll back up to try different settings.
Generated CSS
How It Works
A custom scrollbar is built from two separate sets of CSS: a webkit pseudo-element chain for Chrome, Edge, and Safari, and two standard properties for Firefox.
Webkit browsers use ::-webkit-scrollbar to set the overall width, ::-webkit-scrollbar-track for the background rail, and ::-webkit-scrollbar-thumb for the draggable handle — plus a :hover state on the thumb. Optional ::-webkit-scrollbar-button rules control the small arrow buttons at each end.
Firefox doesn’t support the webkit pseudo-elements. Instead, it reads scrollbar-color (thumb color, then track color) and scrollbar-width (auto, thin, or none) directly on the element.
The generator writes both rule sets at once and scopes them to your chosen selector, so the same CSS block works across browsers without conflicting.
When to Use a Custom Scrollbar
- Matching brand colors on a client site — a scrollbar in the client’s brand navy or accent color reads as more finished than the browser default, especially on long-scroll pages or sidebars.
- Dashboard and plugin UI — if you’re building a WordPress admin panel, plugin settings screen, or SaaS dashboard, a styled scrollbar inside a scrollable panel matches the rest of your custom UI.
- Highlighting a scrollable area — a visibly thicker or colored scrollbar signals to users that a box (like a code snippet, comment thread, or product list) scrolls independently from the page.
FAQ
Does a custom scrollbar work in all browsers?
Chrome, Edge, Safari, and other Chromium/WebKit browsers support the full set of ::-webkit-scrollbar styling options. Firefox supports only scrollbar-color and scrollbar-width, which control thumb color, track color, and overall thickness (auto, thin, or none) — it can’t match every webkit detail like corner radius or arrow buttons. This tool generates both rule sets automatically so the scrollbar degrades gracefully in Firefox instead of breaking.
Why isn’t my scrollbar changing after I paste the CSS?
The most common cause is a selector mismatch — the CSS needs to target the exact element that actually scrolls, not a parent wrapper. If you’re styling the whole page, use body or html. If you’re styling one scrollable box (like a sidebar or code block), give that element a class and enter it in the selector field, e.g. .my-sidebar. Also confirm the element has overflow: auto or overflow: scroll set — a custom scrollbar only appears where scrolling is actually possible.
Can I apply this to just one div instead of the whole page?
Yes. Enter that element’s selector (a class like .chat-window or an ID like #comments) in the target field instead of body. The generated CSS will scope every rule to that selector, leaving the rest of the page’s scrollbar untouched.
Is a custom scrollbar bad for accessibility?
Not inherently, as long as contrast is preserved. Keep enough contrast between the thumb and track colors so the scrollbar stays visible against its background, and avoid setting scrollbar-width: none on content that sighted users need to scroll — hiding the scrollbar removes a visual cue that more content exists below the fold.
Does this work with a WordPress theme?
Yes. Paste the generated CSS into your theme’s Additional CSS panel (Appearance → Customize → Additional CSS) or a child theme’s stylesheet. If you only want it applied inside a specific Custom HTML block or widget, scope the selector to that block’s wrapper class instead of body.