# 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.

**URL:** https://convertto.tech/t/css-scrollbar-generator
**Category:** CSS Generators (https://convertto.tech/c/css-generators)
**Privacy:** Runs entirely in the browser; no upload
**Cost:** Free, no sign-up
**Last updated:** 2026-08-01

## Key facts

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

## How to use

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

## FAQ

### 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.

## Related tools

- [CSS Button Generator](https://convertto.tech/t/css-button-generator): Design a button and copy the CSS, including the hover, active and focus-visible states.
- [CSS Hover Effect Generator](https://convertto.tech/t/css-hover-effects-generator): Generate a hover effect that animates cleanly, with the reduced-motion guard included.
- [CSS Tooltip Generator](https://convertto.tech/t/css-tooltip-generator): Generate a tooltip from a data attribute — no JavaScript, no extra markup.
- [CSS Border Radius Generator](https://convertto.tech/t/border-radius-generator): Drag eight handles to shape every corner: elliptical radii, inverted corners and squircles.
- [CSS Box Shadow Generator](https://convertto.tech/t/box-shadow-generator): Design a CSS box-shadow with live values for offset, blur, spread and colour.
- [CSS Clamp Generator](https://convertto.tech/t/css-clamp-generator): Generate fluid clamp() values that scale smoothly between two viewport widths.
- [CSS Clip Path Generator](https://convertto.tech/t/css-clip-path-generator): Cut an element to a polygon, circle, ellipse or inset, and copy the clip-path.
- [CSS Multi-Column Generator](https://convertto.tech/t/css-columns-generator): Flow text into balanced columns with a rule between them.