CSS Scrollbar Styler (Webkit + Firefox)

Default browser scrollbars look out of place in dark-mode UIs and custom-themed apps. Styling them is fiddly because Webkit (Chrome, Safari, Edge) and Firefox use completely different CSS syntax. This generator lets you pick width, colors, and roundness — and outputs both the ::-webkit-scrollbar pseudo-elements and the Firefox scrollbar-color / scrollbar-width declarations needed for full cross-browser coverage.

Preview (resize me)

Scroll me both ways to see the scrollbar

Generated CSS

How to use the CSS Scrollbar Styler (Webkit + Firefox)

Pick colors and dimensions; the preview at left updates live, and the CSS at right is what you paste into your stylesheet. The output includes both modern scrollbar-color / scrollbar-width (Firefox, plus a fallback for newer Chrome) and the legacy ::-webkit-scrollbar pseudo-elements (Safari, older Chrome) for maximum compatibility.

About CSS Scrollbar Styler (Webkit + Firefox)

Cross-browser scrollbar styling is one of CSS's ugly stepchildren. Two completely different APIs exist:

  • Webkit pseudo-elements (Chrome, Safari, Edge, anything Chromium / Webkit) — ::-webkit-scrollbar, ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-track, etc. Very flexible (each part can have its own size, color, gradient).
  • Modern standard (Firefox + recent Chromium) — scrollbar-width: thin | auto | none and scrollbar-color: thumbColor trackColor. Simple, limited (no per-state hover styling without falling back to pseudo-elements).

Best practice in 2026 is to write both — the standard pair (for forward compat and Firefox), plus the webkit pseudo-elements (for richer styling on Chromium / Safari).

Custom scrollbar accessibility considerations: don't make scrollbars invisible or too thin (1-2px) — users with motor / vision impairment rely on them as targets. macOS overlay scrollbars (which fade) are an accessibility issue and you don't want to replicate that. Aim for ≥8px thumb size with sufficient contrast against the track.

Common use cases

  • Dark-mode UIs — default light gray scrollbars look terrible on dark backgrounds.
  • Branded apps — match scrollbar color to the brand palette.
  • Custom code editors / terminals — VSCode-style thin scrollbars.
  • Embedded widgets — make scrollbars match the parent site's theme.