What Scrollbar CSS Properties Can I Customize with Scrollbar?

Scrollbar (scrollbar.app) is a simple CSS scrollbar editor that lets you visually adjust the main WebKit scrollbar pseudo-element properties and copy the generated CSS. You can customize the scrollbar's width and height, the track and thumb colors, border radius, and hover states. The output targets WebKit-based browsers (Chrome, Edge, Safari, and other Chromium browsers) via ::-webkit-scrollbar and its sub-pseudo-elements; it does not produce Firefox's scrollbar-color/scrollbar-width syntax, so cross-browser coverage requires adding those rules yourself.

Properties you can adjust

The editor exposes the standard WebKit scrollbar pseudo-elements. In practice, the controls map to these CSS properties:

Because the tool is a visual editor, you set these values through color pickers and sliders rather than typing CSS, then read the result in the generated code panel.

Width and height

The width value on ::-webkit-scrollbar controls the vertical scrollbar's thickness; height controls the horizontal scrollbar. A common pattern is a thin bar (for example 8–12px) for a minimal look, or a wider bar when you want a more visible, styled thumb. Setting a value here also affects the space the scrollbar occupies in the layout, so very small widths can make the thumb hard to grab.

Track and thumb colors

The track is the full-length channel the thumb slides along; the thumb is the draggable handle. You can give each its own color, which is the core of most custom scrollbar designs — for example a light track with a darker thumb, or a transparent track so only the thumb shows.

Border radius and hover states

border-radius on the thumb rounds its corners, and applying the same radius to the track keeps the two shapes consistent. The :hover state lets the thumb change color when the pointer is over it, which is the usual way to signal interactivity. Note that hover styling only applies while the user is actually hovering the scrollbar, so it won't be visible in a static screenshot.

Cross-browser considerations

The generated CSS uses WebKit pseudo-elements, which are supported in Chromium browsers and Safari. Firefox does not support ::-webkit-scrollbar; it uses the standardized scrollbar-width and scrollbar-color properties instead. If you need consistent styling across browsers, you typically:

1. Use the WebKit rules from Scrollbar for Chrome, Edge, and Safari.
2. Add a separate Firefox block, for example scrollbar-width: thin; and scrollbar-color: <thumb> <track>; on the scrolling element.
3. Accept that Firefox's standard properties offer fewer options (no per-part border radius or hover pseudo-element), so the two results will not be pixel-identical.

Also keep in mind that scrollbar-width and scrollbar-color are inherited and can override or interact with WebKit styling in some engines, so test in each target browser rather than assuming one rule set covers all.

How to apply the generated CSS

1. Open scrollbar.app and adjust the controls until the preview matches what you want.
2. Copy the generated CSS from the code output.
3. Paste it into your stylesheet, scoping it to the element that scrolls (for example body, a .scroll-container class, or * for a global effect).
4. Reload the page and confirm the scrollbar renders as expected, including the hover state.
5. Add the Firefox fallback rules if you need cross-browser coverage.

A common pitfall: applying the rules to * styles every scrollable element, including nested ones, which can look inconsistent. Scoping to a specific container usually gives cleaner results. Another is forgetting that a fully transparent track can make the scrollbar look like it has disappeared, which may hurt usability if the thumb is also low-contrast.