Does this work in Firefox?

Yes, via the standard scrollbar-width and scrollbar-color properties.

Does this work in Chrome and Safari?

Yes, via the ::-webkit-scrollbar pseudo-elements.

Can I apply this to the whole page?

Yes, apply the class to the html or body element instead of a container.

Is my data uploaded to a server?

No. This tool runs entirely in your browser using standard web APIs, so your input never leaves your device and nothing is logged or stored on our servers.

Does it work offline and on mobile?

Yes. Once the page has loaded it keeps working without a network connection, and the layout is responsive so it stays usable on phones and tablets.

CSS Scrollbar Styler

Design custom scrollbars with live preview.

Support

Works Offline

Privacy First

No Login

No API

Options

Width (12px)

Radius (8px)

Track color

Thumb color

Thumb hover color

Preview

Scrollable line 1

Scrollable line 2

Scrollable line 3

Scrollable line 4

Scrollable line 5

Scrollable line 6

Scrollable line 7

Scrollable line 8

Scrollable line 9

Scrollable line 10

Scrollable line 11

Scrollable line 12

Scrollable line 13

Scrollable line 14

Scrollable line 15

Scrollable line 16

Scrollable line 17

Scrollable line 18

Scrollable line 19

Scrollable line 20

Scrollable line 21

Scrollable line 22

Scrollable line 23

Scrollable line 24

Scrollable line 25

Scrollable line 26

Scrollable line 27

Scrollable line 28

Scrollable line 29

Scrollable line 30

Generated CSS

.scrollbox {
  scrollbar-width: thin;
  scrollbar-color: #94a3b8 #f1f5f9;
}
.scrollbox::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
.scrollbox::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 8px;
}
.scrollbox::-webkit-scrollbar-thumb {
  background: #94a3b8;
  border-radius: 8px;
}
.scrollbox::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

About the CSS Scrollbar Styler

Style scrollbar width, track color, thumb color, hover color, and corner radius using both the modern scrollbar-color property and WebKit pseudo-elements. Preview the result in a scrollable box and copy the CSS.

Examples

Thin gray scrollbar

width 12, thumb #94a3b8

Output

::-webkit-scrollbar { width: 12px; }

Keyboard shortcuts

Copy the main outputCtrl / ⌘ + Shift + C
Download the resultCtrl / ⌘ + S
Share this toolCtrl / ⌘ + Shift + S
Reset the inputsAlt + R
Open the tool search paletteCtrl / ⌘ + K

Related tools

CSS Aspect Ratio Calculator

HTML & CSS

Simplify ratios and compute matching dimensions.

CSS Clamp() Calculator

HTML & CSS

Generate fluid typography clamp() CSS from min/max viewport and size.

CSS Transform Playground

HTML & CSS

Combine translate, rotate, scale, and skew with a live preview.

CSS Variables Theme Builder

HTML & CSS

Build a custom property theme with a live preview.

Email Signature Generator

HTML & CSS

Design a professional HTML email signature and copy it into any mail client.

HTML Table Generator

HTML & CSS

Build an editable HTML table and export HTML + CSS.

Frequently asked questions

Version 1.0.0 · Updated 2026-08-07 · Runs entirely in your browser