CSS Scrollbar Generator

Set the width, radius, border and three colours, check them on a real scrollable preview and copy the generated CSS.

Runs locally in your browser

View category: Frontend & Design (34)

· ::-webkit-scrollbar · scrollbar-color · Firefox

CONTROL RACK

LIVE STAGE

Scrollable developer notes

Use the thumb to inspect the generated width, border and hover treatment.

Cross-browser output

The export includes standardized Firefox properties and WebKit pseudo-elements.

Copy production CSS

Apply the generated class to any overflow container in your interface.

Keep native behavior

Styling changes appearance while keyboard and wheel scrolling remain native.

EXPORT CSS

How to style a scrollbar and copy the generated CSS

The generator writes two rule sets from the same six values: the standard scrollbar-width and scrollbar-color properties for Firefox, and the ::-webkit-scrollbar family — track, thumb, hover and width/height — for Chromium and Safari. The readout in the stage header names the current width and the keyword it resolves to, for example “12px · auto”.

The preview is a real overflow container, not a drawing: the probe measured 528 px of content inside a 300 px window, so the browser paints the styled scrollbar itself. The same CSS that appears in the code panel is injected with #cs-scroll-preview as the selector; only the class name differs from what you copy.

Choose a preset to load a full set of values. Forest is the default — width 12, radius 10, border 3, thumb #2e8b62, hover #1f6f4b, track #e7f0eb — followed by Slate (11/3/2), Sunset (14/12/3) and Minimal (7/7/0).

Or set the values by hand: Width (4–28 px), Corner radius (0–30 px), Thumb border (0–6 px) and the thumb, hover and track colours. Editing a field moves the selector to its Custom entry; Reset brings the Forest defaults back.

Numbers commit when you leave the field or press Enter: they are rounded to whole pixels, clamped to their range and written back into the field. 100 becomes 28, 3 becomes 4, an emptied field falls back to 4 and 12.6 becomes 13, so the number on screen, the readout and the exported CSS never disagree.

Watch the preview while you change values — it scrolls for real, so the thumb, its border, the track and the hover colour are painted by the browser. Widths of 10 px or less also switch the standard declaration to scrollbar-width: thin; 11 px and above use auto, because Firefox accepts only those two keywords while the exact pixel width is a WebKit feature.

Press Copy CSS to put the code panel’s text on the clipboard — five rules and nothing else — or Reset to return to the Forest defaults. The selector in the output is .custom-scrollbar; rename it to the class on your own overflow container.

Width, colours, presets and the two rule sets the generator writes

What the copied CSS contains

The block holds five rules: the base class with scrollbar-color: <thumb> <track>, ::-webkit-scrollbar with the width and the height, ::-webkit-scrollbar-track with the track colour and the radius, ::-webkit-scrollbar-thumb with the thumb colour, a border painted in the track colour and the same radius, and ::-webkit-scrollbar-thumb:hover with the hover colour.

Colours are written as six-digit hex values in lower case and numbers as whole pixels. The thumb border uses the track colour on purpose: it insets the thumb so the track shows through as a hairline around it, which is why changing the track colour also changes that border.

Presets, defaults and Reset

The four presets are fixed value sets, not stylesheets: Forest 12/10/3 with #2e8b62, #1f6f4b and #e7f0eb, Slate 11/3/2 with #526575, #354754 and #dfe5e8, Sunset 14/12/3 with #d87352, #a94f3a and #f7e4dc, and Minimal 7/7/0 with #87958e, #53635b and #f3f6f4. The order is width, radius, border, then thumb, hover and track.

Custom is a state, not a fifth preset: the entry stays hidden in the list, appears as the selected label once a field is edited, and choosing it does not overwrite the values on screen. Reset restores the Forest defaults and clears the status line.

Limits, browser coverage and local processing

Width is limited to 4–28 px, the radius to 0–30 px and the thumb border to 0–6 px, and every value is rounded to a whole pixel when it is committed. Chromium and Safari honour the pixel width and the colours through the ::-webkit-scrollbar pseudo-elements, while Firefox honours scrollbar-width and scrollbar-color only, so check the result in both engines before shipping it — the preview shows the browser you are using.

Everything runs on the page: after loading, switching presets, typing a width, picking a colour, copying and resetting produced no network request in the en, fr and ja probe runs, and the page reported no console errors. The layout stays inside the viewport from 320 px to 1360 px wide without horizontal scrolling.