Scrollbar Styler

About this tool

Default browser scrollbars are utilitarian and rarely match an application's visual design. Branded interfaces — dashboards, editors, dark-mode apps — benefit from slim, on-tone scrollbars. Styling scrollbars in CSS involves two approaches: the WebKit pseudo-elements (::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb) and the standard scrollbar-color and scrollbar-width properties. The Scrollbar Styler generates both in a single output from three inputs: a track color, a thumb color and a width in pixels (minimum 6). Widths of 8px or less set scrollbar-width: thin; wider values use auto. The WebKit thumb always gets a fully rounded border-radius. A scrollable preview panel shows the colors as you change them. Note that Chrome and Edge 121+ honor the standard scrollbar-color when it is set, which takes precedence over the ::-webkit-scrollbar rules there; Safari uses the WebKit rules.

Why use it

• Two Approaches in One Block: The output pairs scrollbar-color and scrollbar-width on * with ::-webkit-scrollbar, -track and -thumb rules, so you do not have to maintain two code paths manually.

• Width Control: Enter an exact pixel width (minimum 6). The WebKit rules use it for both width and height; for the standard property, 8px or less becomes thin and anything wider becomes auto.

• Track + Thumb Colors: Two color pickers set the rail and the draggable thumb. A matching track with a contrasting thumb suits branded dashboards; a near-background track keeps editors quiet.

• Rounded Thumb: The WebKit thumb always gets border-radius: 999px for a pill shape. The standard scrollbar-color property has no border-radius equivalent, so this applies only where the WebKit rules are used.

• Browser Precedence Note: Chrome and Edge 121+ support scrollbar-color, and when it is set they ignore ::-webkit-scrollbar styling — so in current Chromium you get your colors but not the pixel width or rounded thumb. Safari still uses the WebKit rules.

How to use

1. Pick a Track color (the scrollbar rail background)
2. Pick a Thumb color (the draggable indicator)
3. Enter a Width in pixels (minimum 6); 8px or less also sets scrollbar-width to thin
4. Scroll the preview panel to check the colors on a sample scroll area
5. Click Copy CSS to get the standard scrollbar-color rule and the WebKit pseudo-element rules in one block

When it helps

• When building a dark-mode dashboard where the default light scrollbar visually clashes with the dark surface
• When creating a code editor or text panel that needs a slim, unobtrusive scrollbar that does not compete with content
• When applying brand colors to scrollbars in a design-system component like a modal, dropdown, or sidebar
• When a client requests that scrollbars match the application's color scheme as part of a full UI redesign
• When a scrollable card or panel within a page needs a different scrollbar style from the rest of the document
• When polishing a rich-text editor or data table component for a professional product release

Examples

Track: #f1f1f1, Thumb: #888888, Width: 8

/* Firefox fallback */
* {
  scrollbar-width: thin;
  scrollbar-color: #888888 #f1f1f1;
}

/* Chromium, Safari, Edge */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
  background: #888888;
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  filter: brightness(1.1);
}

Track: #1f1f1f, Thumb: #f5c842, Width: 10

/* Firefox fallback */
* {
  scrollbar-width: auto;
  scrollbar-color: #f5c842 #1f1f1f;
}

/* Chromium, Safari, Edge */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: #1f1f1f;
}
::-webkit-scrollbar-thumb {
  background: #f5c842;
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  filter: brightness(1.1);
}

Track: #ffffff, Thumb: #6366f1, Width: 12

/* Firefox fallback */
* {
  scrollbar-width: auto;
  scrollbar-color: #6366f1 #ffffff;
}

/* Chromium, Safari, Edge */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
::-webkit-scrollbar-track {
  background: #ffffff;
}
::-webkit-scrollbar-thumb {
  background: #6366f1;
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  filter: brightness(1.1);
}

Tips

• Keep scrollbar width at 6px or wider — narrower thumbs are difficult for mouse users to grab and drag precisely
• Always pair ::-webkit-scrollbar rules with scrollbar-color for Firefox parity in a single CSS block rather than in separate files
• macOS hides scrollbars by default for trackpad users — test your styles with System Preferences set to Always show scrollbars so you can actually see them during development
• Use a transparent track with a subtle semi-transparent thumb for an overlay-style scrollbar that maximizes content area width in dense panels
• Never set scrollbar-width: none or hide scrollbars entirely on desktop layouts — users rely on them as positional indicators and drag targets even when trackpads are available

Frequently Asked Questions

Glossary

WebKit Pseudo-Element

A vendor-prefixed CSS pseudo-element like ::-webkit-scrollbar that targets specific parts of a scrollbar in Chrome, Edge, and Safari. Not standardized by the W3C.

Scrollbar Track

The full-length rail of a scrollbar that the thumb slides along. Styled with ::-webkit-scrollbar-track in WebKit browsers; its color is the second value in scrollbar-color for Firefox.

Scrollbar Thumb

The draggable indicator within the scrollbar track that shows the viewport position and can be dragged to scroll. Styled with ::-webkit-scrollbar-thumb in WebKit; its color is the first value in scrollbar-color for Firefox.

scrollbar-color

A W3C standard CSS property that sets thumb and track colors for scrollbars in Firefox using the syntax: scrollbar-color: thumbColor trackColor.

scrollbar-width

A W3C standard CSS property that sets scrollbar width in Firefox. Values are auto (default), thin (narrow system scrollbar), or none (hidden but still functional).

Overlay Scrollbar

A scrollbar that floats over content without displacing it, typically semi-transparent and appearing only on scroll. Common on macOS and iOS. Cannot be styled with standard CSS on these platforms.