Custom Scrollbar CSS Generator

Style scrollbars with your own width, colors, and rounded thumb, and get CSS that works everywhere: the standard scrollbar-color for Firefox and new Chrome, plus ::-webkit-scrollbar rules for Safari and older browsers.

Updated
Runs in your browser. Your data is not uploaded.
Preview
CSS
HTML

How to use the Scrollbar Generator

  1. Enter the Selector of the scrolling element, such as .scroll-area or html for the whole page.
  2. Set the Width, Thumb radius, and the Track color, Thumb color, and Thumb hover color. Scroll the preview to try it.
  3. Press Copy CSS.

How it works

  • Standard CSS: scrollbar-color: thumb track and scrollbar-width: auto | thin. Firefox supports them, and Chrome and Edge since version 121.
  • WebKit rules: ::-webkit-scrollbar, ::-webkit-scrollbar-track, and ::-webkit-scrollbar-thumb control Safari and older Chrome, including the exact width, radius, and hover color.
  • Chrome 121+ uses the standard properties when both are present, so the thumb radius and hover color apply mainly in Safari.
  • The standard property only knows thin and auto; widths of 8px or less are written as thin.

Examples

.scroll-area {
  scrollbar-width: auto;
  scrollbar-color: #b7bdc6 #f5f5f5;
}

.scroll-area::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.scroll-area::-webkit-scrollbar-thumb {
  background: #b7bdc6;
  border-radius: 6px;
}

Limitations

  • On phones and on macOS with overlay scrollbars, most of these styles are ignored.
  • Thin, low-contrast scrollbars are hard to see and grab. Keep the thumb clearly visible against the track.

Frequently asked questions

Does scrollbar styling work in Firefox?

Yes, with scrollbar-color and scrollbar-width. Firefox ignores the ::-webkit-scrollbar rules, which is why both are generated.

How do I style the whole page's scrollbar?

Use html as the selector.

Why is my border-radius ignored in Chrome?

Chrome 121 and newer use the standard properties when they are set, and those have no radius option. Remove the standard lines if the radius matters more to you.

Is anything uploaded?

No. The CSS is built in your browser.

Often used together with the Scrollbar Generator.