Skip to content
Convertto

Custom Scrollbar CSS Generator

Style a scrollbar with both the standard properties and the WebKit pseudo-elements.

There are two ways to style a scrollbar and you need both for now. scrollbar-width and scrollbar-color are the standard properties, supported by Firefox and by Chrome from version 121; the ::-webkit-scrollbar pseudo-elements are the older approach that Safari and earlier Chrome still rely on. The standard version only offers auto, thin or none for the width, so exact pixel control remains WebKit-only. Hiding a scrollbar entirely does not stop the element scrolling, which is worth checking before you do it.

Runs in your browser
Privacy
Runs entirely in your browser — nothing is uploaded
Cost
Free, unlimited, no sign-up

Frequently asked questions

Why are there two sets of properties?

The ::-webkit-scrollbar pseudo-elements were never standardised, and the CSS Working Group specified scrollbar-width and scrollbar-color instead. Chrome 121 added the standard ones, but Safari has not, so shipping both is the only way to cover everyone today.

Should I hide the scrollbar completely?

Rarely. The scrollbar is the only indication that content continues below the fold, and hiding it costs discoverability for everyone while gaining a small amount of visual tidiness. If you do, keep another affordance — a fade, an arrow, anything.

Can I get an exact scrollbar width in Firefox?

No. scrollbar-width only takes auto, thin and none by design, so the platform keeps control of the size. Exact pixel widths remain WebKit-only.

How to use the css scrollbar styler

  1. 1Set the width.
  2. 2Set the thumb radius.
  3. 3Pick the track.
  4. 4Pick the thumb.
  5. 5Pick the thumb on hover.
  6. 6The result appears immediately — copy or download it.

Embed this tool

Put the working css scrollbar styler on your own site. It runs in your visitors' browsers exactly as it does here — free, no account, nothing uploaded.

Share this tool

Related tools

CSS Button GeneratorDesign a button and copy the CSS, including the hover, active and focus-visible states.CSS Hover Effect GeneratorGenerate a hover effect that animates cleanly, with the reduced-motion guard included.CSS Tooltip GeneratorGenerate a tooltip from a data attribute — no JavaScript, no extra markup.CSS Border Radius GeneratorDrag eight handles to shape every corner: elliptical radii, inverted corners and squircles.CSS Box Shadow GeneratorDesign a CSS box-shadow with live values for offset, blur, spread and colour.CSS Clamp GeneratorGenerate fluid clamp() values that scale smoothly between two viewport widths.

Last updated

More css generators