ffee All tools
EN 中文 FR DE

Scrollbar Styler

Style a custom scrollbar with webkit rules and the standard properties, then copy the CSS.

Style a scrollbar

Scroll this panel to see the styled scrollbar in action. Use the mouse wheel, the trackpad or drag the thumb.

Every colour, the width, the radius and the track inset come from the controls above, and the same values are written into the CSS box below.

The webkit pseudo-elements style Chromium and Safari, while scrollbar-width and scrollbar-color cover Firefox and newer engines.

Paste the rule into your stylesheet, rename the class to match your scroll container and the styling follows every overflow area you target.

A rounded thumb with a little padding usually looks best, and a hover colour keeps the control discoverable when the pointer is over it.

Keep the contrast between the thumb and the track high enough so the scrollbar stays easy to find on any screen.

scrollbar-width: thin · scrollbar-color: —
webkit width: 12px
scrollbar-width and scrollbar-color apply directly to the scrolling element, while the thumb and track colours need the webkit pseudo-elements.

How to use the Scrollbar Styler

  1. Set the scrollbar width, thumb radius and track inset with the sliders.
  2. Pick the thumb, track and hover colours and choose a scrollbar-width value.
  3. Scroll the preview panel, then copy the CSS and rename the selector.

Features

Advertisement

More tools

Flexbox Generator CSS Grid Generator Button Style Generator CSS Animation Generator CSS Transition Generator CSS Transform Generator CSS Filter Generator Glassmorphism Generator Neumorphism Generator Breakpoint Preview Font Pairing Tool Line Height Calculator

Frequently Asked Questions

Common questions about the free online scrollbar styler.

Set scrollbar-width and scrollbar-color on the scrolling element, then add webkit pseudo-element rules for the thumb and the track.
Chromium and Safari support the webkit pseudo-elements, while Firefox and newer engines support scrollbar-width and scrollbar-color.
The element must actually overflow. Give it a fixed height and more content than fits, otherwise there is no scrollbar to style.
The thumb is the draggable part that shows the position, and the track is the groove it slides along behind it.
Yes. Set scrollbar-width to none, or use a transparent thumb and track colour, and the content still scrolls without a visible bar.
Yes. The preview panel overflows on purpose, so you can drag the thumb or press the scroll button to test the styling.
Very thin bars can be hard to grab. Keep at least ten to twelve pixels of width, or leave the default on touch devices.
Yes. It is completely free, runs locally in your browser and needs no account, no sign-up and no upload.

Last updated: October 10, 2026