What is the difference between WebKit scrollbar and the standard scrollbar?

WebKit (Chrome, Safari, Edge, Opera) styles scrollbars with the `::-webkit-scrollbar` pseudo-element family — separate selectors for the bar, track, thumb, hover state, and buttons — so you get pixel control over width and corner radius. The standard properties `scrollbar-width` and `scrollbar-color` are a much smaller spec that Firefox implements: you get a thin/auto/none size and a thumb+track color pair, nothing more. This tool exports both so you do not have to choose.

Why can't Firefox match every WebKit detail?

Firefox deliberately only implements the CSS Scrollbars spec, which is intentionally limited for accessibility and OS consistency. `scrollbar-width` accepts only `auto`, `thin`, or `none` — no pixel value — and `scrollbar-color` takes exactly two colors (thumb then track). There is no Firefox equivalent for track radius, thumb radius, or end buttons. We map your px width onto the closest keyword (0 → none, up to 11px → thin, larger → auto) and pass your thumb and track colors through, which is the faithful maximum the spec allows.

Can I style the whole page or just one element?

Both. The Scope toggle switches the selector between `*` (every scroll container on the page) and `.custom-scrollbar` (a single class you add to the one element you want). Scoping to a class is safer when you embed inside an app you do not fully own, because the global `*` form can override scrollbars in third-party widgets you did not intend to touch.

Does this hide the scrollbar completely?

Set the width slider to 0. The WebKit block then renders a zero-size scrollbar and the Firefox block emits `scrollbar-width: none`, hiding it in both worlds while keeping the element scrollable. Remember that a fully hidden scrollbar removes a visible affordance — keep it for decorative carousels, not primary content.

Why are the standard properties listed before the WebKit ones?

Order does not change correctness here since the two target disjoint engines, but putting the standard `scrollbar-*` properties first reads as progressive enhancement: the cross-browser baseline comes first, the WebKit refinement second. It also keeps the Firefox-relevant lines at the top where a Firefox-focused reviewer expects them.

Brand a dashboard's scroll areas to match the design system

Your SaaS dashboard has a dozen scrollable panels and the default gray OS scrollbar clashes with the dark theme. Pick the Dark preset, nudge the thumb color to your brand accent, set the Scope to one element, and add `class="custom-scrollbar"` to each panel wrapper. Paste the combined block once into your global stylesheet. Chrome and Safari users get the pixel-perfect bar; Firefox users get the matching thumb and track colors. Five minutes versus reverse-engineering the WebKit selector names from memory.

Hide the scrollbar on a horizontal card carousel

A row of product cards scrolls horizontally and the visible scrollbar looks clumsy under the cards. Set width to 0 — the export becomes a zero-size WebKit bar plus `scrollbar-width: none` for Firefox — scope it to `.custom-scrollbar`, and apply that class to the carousel track. The row still scrolls by drag, wheel, and trackpad, but the bar is gone in every browser. Keep this pattern for decorative strips only, not for content users must be able to scroll deliberately.

Make a code block's scrollbar readable on a light docs site

Long code samples on a documentation page scroll horizontally, and the faint default scrollbar is invisible against the white background. Start from Minimal, bump the thumb to a mid-gray that passes against white, give it a 4px radius so it reads as a deliberate element, and scope it to `.custom-scrollbar` on your ` ` wrapper. The live preview here uses the same dark stage, so flip your real page to light and confirm the contrast before shipping.

Hand a designer-approved scrollbar to engineering as a shareable link

A designer dials in the exact width, radius, and colors in this tool, then copies the page URL — the full config is encoded in the query string. They drop the link in the ticket. The engineer opens it, sees the identical scrollbar, clicks Copy CSS, and pastes. No screenshot round-trips, no "what hex was that thumb again" follow-ups, no translating a Figma spec into WebKit selector names by hand.

Audit a third-party widget's scrollbar before overriding globally

Before you slap a global `*::-webkit-scrollbar` rule on a page that embeds a chat widget or a maps SDK, switch Scope to Whole page and read the generated selector. Seeing the literal `*` reminds you that the rule will also repaint scrollbars inside iframes' same-origin content and any third-party component on the page. If that is too broad, flip back to the class scope and target only the containers you own.

CSS Scrollbar Generator — WebKit + Firefox, one copy-paste block

Design custom scrollbars visually — exports WebKit + Firefox-standard CSS, live preview, one-click copy — browser-only

Runs locally
Category Color & Design
Best for Moving from a visual idea to reusable color values.

Presets

Scope

Whole page styles every scroll container via `*`. One element scopes the rules to a single class you add to the container you want — safer for embedding in apps you do not fully control.

Scrollbar width 10px

Track color

Track radius 8px

Thumb color

Thumb hover color

Thumb radius 8px

Show end buttons

Live preview — scroll me

Scroll this box to see your scrollbar in action.
The thumb is the part you drag; the track is the groove behind it. Hover the thumb to test the hover color.

WebKit browsers (Chrome, Safari, Edge) render every detail you set here. Firefox applies the standard scrollbar-width and scrollbar-color, so it follows the thumb and track colors but uses its own thin/auto sizing.

Keep scrolling. There is plenty more text below so the scrollbar has room to move and you can judge the contrast against your page background before you ship the CSS.

A scrollbar that is too low-contrast disappears; one that is too loud fights your content. Aim for a thumb that is clearly visible but quieter than your primary actions.

Generated CSS

/* Standard properties — Firefox */
.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #8b5cf6 #1e293b;
}

/* WebKit pseudo-elements — Chrome, Safari, Edge */
.custom-scrollbar::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: #1e293b;
  border-radius: 8px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #8b5cf6;
  border-radius: 8px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #06e6d7;
}

.custom-scrollbar::-webkit-scrollbar-button {
  display: none;
}

What this tool does

A visual editor for custom scrollbars that exports CSS for every modern browser at once. Drag the sliders to set scrollbar width, track color and radius, thumb color, hover color, and thumb radius; toggle the end buttons; pick from six presets (Aurora, Minimal, macOS, Dark, Neon, Classic). The right-hand panel is a real scrollable container that applies your style live, so you judge contrast against an actual page background before you ship.

The catch with scrollbar styling is that it lives in two separate worlds. Chrome, Safari, and Edge use the WebKit `::-webkit-scrollbar` pseudo-element family, which gives pixel-level control. Firefox ignores those entirely and honors only the standard `scrollbar-width` and `scrollbar-color` properties. Ship one without the other and half your visitors fall back to the browser default. This tool always emits a combined block that satisfies both, with the standard properties first so Firefox reads them cleanly.

Everything runs in your browser. No colors or settings are uploaded, the shareable URL encodes your design so a teammate opens the exact same scrollbar, and localStorage remembers your last edit.

Tool details

Input: Text + Numbers + Structured content; The page exposes text boxes, numeric controls, file pickers, or structured inputs depending on the tool.
Output: Live result + Copy + Preview; The result area focuses on usable output, with copy, download, or preview actions when supported.
Privacy: Browser-side processing; The main tool logic does not call an external API, so inputs normally stay in the current tab.
Save / share: Shareable URL state; Key settings are encoded in the URL so another person can reopen the same setup.
Performance budget: Initial JS <= 10 KB; No WASM budget is declared, keeping the tool quick to open on mobile.
Best fit: Color & Design · Designer; Category and role tags drive related tools, internal links, and quick fit checks.

How to use

1. Input

Paste or drop your content into the tool panel.
2. Process

Click the button. All processing is local in your browser.
3. Copy / Download

Copy the result or download to disk in one click.

How CSS Scrollbar Generator fits into your work

Use it while choosing, checking, converting, or documenting colors for real interface work.

Color jobs

Moving from a visual idea to reusable color values.
Checking contrast and accessibility before a UI ships.
Keeping brand, design, and implementation color decisions aligned.

Color checks

Verify contrast against the actual background, not just a sample swatch.
Check dark and light themes separately when both exist.
Copy the final format your design system or codebase expects.

Good next steps

These links move the current task into a more complete workflow.

Real-world use cases

Brand a dashboard's scroll areas to match the design system
Your SaaS dashboard has a dozen scrollable panels and the default gray OS scrollbar clashes with the dark theme. Pick the Dark preset, nudge the thumb color to your brand accent, set the Scope to one element, and add `class="custom-scrollbar"` to each panel wrapper. Paste the combined block once into your global stylesheet. Chrome and Safari users get the pixel-perfect bar; Firefox users get the matching thumb and track colors. Five minutes versus reverse-engineering the WebKit selector names from memory.
Hide the scrollbar on a horizontal card carousel
A row of product cards scrolls horizontally and the visible scrollbar looks clumsy under the cards. Set width to 0 — the export becomes a zero-size WebKit bar plus `scrollbar-width: none` for Firefox — scope it to `.custom-scrollbar`, and apply that class to the carousel track. The row still scrolls by drag, wheel, and trackpad, but the bar is gone in every browser. Keep this pattern for decorative strips only, not for content users must be able to scroll deliberately.
Make a code block's scrollbar readable on a light docs site
Long code samples on a documentation page scroll horizontally, and the faint default scrollbar is invisible against the white background. Start from Minimal, bump the thumb to a mid-gray that passes against white, give it a 4px radius so it reads as a deliberate element, and scope it to `.custom-scrollbar` on your `<pre>` wrapper. The live preview here uses the same dark stage, so flip your real page to light and confirm the contrast before shipping.
Hand a designer-approved scrollbar to engineering as a shareable link
A designer dials in the exact width, radius, and colors in this tool, then copies the page URL — the full config is encoded in the query string. They drop the link in the ticket. The engineer opens it, sees the identical scrollbar, clicks Copy CSS, and pastes. No screenshot round-trips, no "what hex was that thumb again" follow-ups, no translating a Figma spec into WebKit selector names by hand.
Audit a third-party widget's scrollbar before overriding globally
Before you slap a global `*::-webkit-scrollbar` rule on a page that embeds a chat widget or a maps SDK, switch Scope to Whole page and read the generated selector. Seeing the literal `*` reminds you that the rule will also repaint scrollbars inside iframes' same-origin content and any third-party component on the page. If that is too broad, flip back to the class scope and target only the containers you own.

Common pitfalls

Shipping only the `::-webkit-scrollbar` rules and assuming you are done. Firefox completely ignores them — your Firefox users see the OS default. Always include the standard `scrollbar-width` / `scrollbar-color` block, which this tool generates for you.
Writing `scrollbar-color` with the track first. The standard syntax is `scrollbar-color: <thumb> <track>` — thumb color comes first. Swapping them gives a track-colored thumb on a thumb-colored track, which usually looks inverted. Copy the order this tool outputs.
Putting a pixel value in `scrollbar-width`. Firefox only accepts `auto`, `thin`, or `none` — `scrollbar-width: 10px` is invalid and silently dropped, so the property does nothing. The pixel width only applies to the WebKit bar; this tool maps your px onto the legal Firefox keyword automatically.

Privacy

Everything runs as plain JavaScript in your browser tab — the CSS is assembled locally and nothing about your colors, sizes, or settings is sent anywhere. There is no analytics on what you design. The one privacy caveat: the shareable URL encodes your full scrollbar config in the query string, so if you paste a "share link" into Slack or a ticket, the destination server's access log will record those values. They are just colors and pixel sizes, so for scrollbar design that is harmless — but be aware the link carries the config, not a private session.

FAQ

Tool combos

Folks in your role tend to reach for these alongside this tool.

Browse all tools for this role

CSS Scrollbar Generator — WebKit + Firefox, one copy-paste block

What this tool does

Tool details

How to use

1. Input

2. Process

3. Copy / Download

How CSS Scrollbar Generator fits into your work

Color jobs

Color checks

Good next steps

Real-world use cases

Brand a dashboard's scroll areas to match the design system

Hide the scrollbar on a horizontal card carousel

Make a code block's scrollbar readable on a light docs site

Hand a designer-approved scrollbar to engineering as a shareable link

Audit a third-party widget's scrollbar before overriding globally

Common pitfalls

Privacy

FAQ

CSS Grid Visual Generator

CSS Border Radius Generator

CSS Loaders Generator

Glassmorphism Generator

CSS Transform Generator

Flexbox Playground & CSS Generator

CSS Box Shadow Generator

CSS Clip-Path Generator

Color Blindness Simulator

Color Contrast Checker

Color Converter

Color Mixer