Learn Computer Academy
বাংলা

CSS Scrollbar Styler

Style every part of a scrollbar — track, thumb, corner, buttons — and see it rendered by the actual browser engine, not a mockup. Two systems, two different sets of browsers: the honest support note below explains which is which.

Read the pseudo-elements lesson

Two systems that don’t talk to each other

`scrollbar-width` and `scrollbar-color` are the standard: Firefox has supported them for years, and Chromium-based browsers (Chrome, Edge, Opera) added them more recently. Safari supports neither. `::-webkit-scrollbar` and its parts are WebKit/Blink-only — Chrome, Edge, Opera and Safari all honour them; Firefox ignores every rule below completely. Ship both, like this tool generates, if you want it to look intentional everywhere — a scrollbar you didn’t style is perfectly fine on the browser you didn’t style it for.

Standard (scrollbar-width / scrollbar-color)

scrollbar-width

::-webkit-scrollbar

Track

Thumb

Corner

Buttons

Line 1 — scroll this box to see the styled scrollbar respond in real time, rendered by the browser itself.

Line 2 — scroll this box to see the styled scrollbar respond in real time, rendered by the browser itself.

Line 3 — scroll this box to see the styled scrollbar respond in real time, rendered by the browser itself.

Line 4 — scroll this box to see the styled scrollbar respond in real time, rendered by the browser itself.

Line 5 — scroll this box to see the styled scrollbar respond in real time, rendered by the browser itself.

Line 6 — scroll this box to see the styled scrollbar respond in real time, rendered by the browser itself.

Line 7 — scroll this box to see the styled scrollbar respond in real time, rendered by the browser itself.

Line 8 — scroll this box to see the styled scrollbar respond in real time, rendered by the browser itself.

Line 9 — scroll this box to see the styled scrollbar respond in real time, rendered by the browser itself.

Line 10 — scroll this box to see the styled scrollbar respond in real time, rendered by the browser itself.

Line 11 — scroll this box to see the styled scrollbar respond in real time, rendered by the browser itself.

Line 12 — scroll this box to see the styled scrollbar respond in real time, rendered by the browser itself.

Line 13 — scroll this box to see the styled scrollbar respond in real time, rendered by the browser itself.

Line 14 — scroll this box to see the styled scrollbar respond in real time, rendered by the browser itself.

Line 15 — scroll this box to see the styled scrollbar respond in real time, rendered by the browser itself.

Line 16 — scroll this box to see the styled scrollbar respond in real time, rendered by the browser itself.

Line 17 — scroll this box to see the styled scrollbar respond in real time, rendered by the browser itself.

Line 18 — scroll this box to see the styled scrollbar respond in real time, rendered by the browser itself.

Line 19 — scroll this box to see the styled scrollbar respond in real time, rendered by the browser itself.

Line 20 — scroll this box to see the styled scrollbar respond in real time, rendered by the browser itself.

Line 21 — scroll this box to see the styled scrollbar respond in real time, rendered by the browser itself.

Line 22 — scroll this box to see the styled scrollbar respond in real time, rendered by the browser itself.

Line 23 — scroll this box to see the styled scrollbar respond in real time, rendered by the browser itself.

Line 24 — scroll this box to see the styled scrollbar respond in real time, rendered by the browser itself.

Scroll the box below — this is a real, live scrollbar, not a screenshot.

Preview

Scroll axis

Presets

Generated CSS

No Tailwind tab — core Tailwind has no scrollbar utilities (the popular plugin that adds them isn’t part of this project), so generating classes for it would produce copy that doesn’t work.

.scrollable {
  scrollbar-width: thin;
  scrollbar-color: #94a3b8 #f1f5f9;
}

.scrollable::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

.scrollable::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 8px;
}

.scrollable::-webkit-scrollbar-thumb {
  background: #94a3b8;
  border-radius: 8px;
  border: 2px solid #f1f5f9;
  background-clip: padding-box;
}

.scrollable::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

.scrollable::-webkit-scrollbar-corner {
  background: #f1f5f9;
}

Hover or tap a field to see what it does.

The up/down/left/right arrow buttons at each end. Hidden by default in most browsers — `::-webkit-scrollbar-button` needs an explicit size to show at all, which is what this toggle sets. Chrome draws its own native arrow glyph on top automatically once the button has a size; you’re only styling the box behind it.