custom scrollbar generator

How to use the custom scrollbar generator

  1. Set track and thumb colors — light and dark variants update together.
  2. Adjust width, border radius, and hover color for the thumb.
  3. Preview against light and dark backgrounds to confirm contrast.
  4. Copy the CSS — includes both WebKit (::-webkit-scrollbar) and standard (scrollbar-width, scrollbar-color) rules.

When to use it

Use a custom scrollbar when your design system's default scroll UI looks jarring against your theme — especially on dark-mode sites where native Windows scrollbars are bright. Don't over-style: invisible or too-thin scrollbars hurt usability for trackpad users who rely on visual scroll affordance. Alternative: the Firefox scrollbar-color property is simpler but less powerful than WebKit's selectors.

Frequently asked questions

Does it work in Firefox and Safari?
Firefox uses the standard scrollbar-width and scrollbar-color — limited to width and two colors. WebKit (Safari, Chrome) supports full styling via ::-webkit-scrollbar. The generator outputs both for cross-browser coverage.
Will custom scrollbars hurt accessibility?
They can. Keep the thumb at least 6-8px wide and ensure 3:1 contrast against the track. Users with motor impairments need a hit target they can grab.
Can I hide the scrollbar entirely?
Yes (scrollbar-width: none for Firefox, ::-webkit-scrollbar { display: none } for WebKit) — but only do this for horizontal carousels or custom-scrolled containers where the user has another clear scroll cue.

Related tools

Last updated: 2026-04-22