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.

CSS Scrollbar Styler

Design custom scrollbars with live preview.

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; }

Related tools

Border Radius Generator

HTML & CSS

Fine-tune per-corner border radii visually.

Box Shadow Generator

HTML & CSS

Layer multiple box-shadows with a live preview.

Clip Path Generator

HTML & CSS

Design polygon clip-path shapes with a live preview.

CSS Animation Generator

HTML & CSS

Build keyframe animations visually with a live preview.

CSS Aspect Ratio Calculator

HTML & CSS

Simplify ratios and compute matching dimensions.

CSS Filter Playground

HTML & CSS

Tune blur, brightness, contrast, and more with a live preview.

Frequently asked questions

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