Release notes

The custom scrollbar you are shaping is rendered on this panel. Drag the thumb, or scroll with a trackpad or wheel, and watch it respond to the width, color, and radius controls on the left.

WebKit browsers (Chrome, Safari, Edge) render the ::-webkit-scrollbar pseudo-elements. Firefox uses the standard scrollbar-width and scrollbar-color properties instead — both are emitted so it works everywhere.

A width of zero hides the scrollbar entirely while keeping the panel scrollable — useful for carousels and touch surfaces.

Track radius rounds the gutter; thumb radius rounds the draggable handle. Thumb inset adds a transparent border so the thumb floats inside the track.

Keep contrast high enough that the thumb is discoverable, but subtle enough that it does not fight your content for attention.

Keyboard and pointer users both rely on the scrollbar as an affordance — an invisible one can hurt discoverability, so hide it deliberately, not by accident.

This paragraph exists purely to guarantee the panel overflows so there is always something to scroll while you tune the controls.

And one more line for good measure, so the thumb stays comfortably shorter than the track.