Do I need both WebKit and Firefox CSS?

Yes for broad support. Firefox uses scrollbar-width and scrollbar-color. Chrome, Safari, and Edge use ::-webkit-scrollbar pseudo-elements. The generator exports both.

Why doesn’t my scrollbar look the same everywhere?

Browsers render scrollbars differently. Firefox can’t match full WebKit thumb borders/radius — use Thin/Auto/None for Firefox and richer styles for WebKit.

What does scrollbar-gutter: stable do?

It reserves space for the scrollbar so layout doesn’t shift when overflow appears. Enable it in Options when you want stable page width.

What is an HTML color code?

An HTML color code is a way to specify colors in web pages using HEX (#RRGGBB), RGB, HSL, or named CSS colors. HEX is the most common format in CSS and HTML.

How do I convert HEX to RGB?

Use our HEX to RGB converter. Paste a HEX value like #FF5733 and get rgb(255, 87, 51). You can also convert RGB back to HEX with the RGB to HEX tool.

CSS Tools All menus →

Scrollbar Generator

Design professional scrollbars for WebKit and Firefox — presets, thumb hover states, radius, borders, gutter, and live vertical/horizontal preview.

Workspace

Scrollbar

WebKit + Firefox scrollbar styles with live preview.

Live

Borders Buttons

Presets

Colors

Track

Thumb

Thumb hover

Thumb active

WebKit size

Width / height · 10px

Thumb radius · pill

Thumb border · 0px

Firefox

Firefox uses scrollbar-width + scrollbar-color (thumb then track).

Options

Thumb :hover / :activeCorner stylescrollbar-gutter: stable

Class name

Extra CSS on container

Preview

Scroll the panel

Scrollbar preview line 1 — customize track, thumb, hover, and radius. Works in WebKit and Firefox.

Scrollbar preview line 2 — customize track, thumb, hover, and radius. Works in WebKit and Firefox.

Scrollbar preview line 3 — customize track, thumb, hover, and radius. Works in WebKit and Firefox.

Scrollbar preview line 4 — customize track, thumb, hover, and radius. Works in WebKit and Firefox.

Scrollbar preview line 5 — customize track, thumb, hover, and radius. Works in WebKit and Firefox.

Scrollbar preview line 6 — customize track, thumb, hover, and radius. Works in WebKit and Firefox.

Scrollbar preview line 7 — customize track, thumb, hover, and radius. Works in WebKit and Firefox.

Scrollbar preview line 8 — customize track, thumb, hover, and radius. Works in WebKit and Firefox.

Scrollbar preview line 9 — customize track, thumb, hover, and radius. Works in WebKit and Firefox.

Scrollbar preview line 10 — customize track, thumb, hover, and radius. Works in WebKit and Firefox.

Scrollbar preview line 11 — customize track, thumb, hover, and radius. Works in WebKit and Firefox.

Scrollbar preview line 12 — customize track, thumb, hover, and radius. Works in WebKit and Firefox.

Scrollbar preview line 13 — customize track, thumb, hover, and radius. Works in WebKit and Firefox.

Scrollbar preview line 14 — customize track, thumb, hover, and radius. Works in WebKit and Firefox.

Scrollbar preview line 15 — customize track, thumb, hover, and radius. Works in WebKit and Firefox.

Scrollbar preview line 16 — customize track, thumb, hover, and radius. Works in WebKit and Firefox.

Scrollbar preview line 17 — customize track, thumb, hover, and radius. Works in WebKit and Firefox.

Scrollbar preview line 18 — customize track, thumb, hover, and radius. Works in WebKit and Firefox.

Scrollbar preview line 19 — customize track, thumb, hover, and radius. Works in WebKit and Firefox.

Scrollbar preview line 20 — customize track, thumb, hover, and radius. Works in WebKit and Firefox.

Scrollbar preview line 21 — customize track, thumb, hover, and radius. Works in WebKit and Firefox.

Scrollbar preview line 22 — customize track, thumb, hover, and radius. Works in WebKit and Firefox.

Scrollbar preview line 23 — customize track, thumb, hover, and radius. Works in WebKit and Firefox.

Scrollbar preview line 24 — customize track, thumb, hover, and radius. Works in WebKit and Firefox.

Track

#fce7f3

Thumb

#e11d48

Width

10px

Firefox

thin

Firefox · WebKit

CSS outputcss | scrollbar.css

123456789101112131415161718192021222324252627/* Firefox */
.scroll {
  scrollbar-width: thin;
  scrollbar-color: #e11d48 #fce7f3;
}

/* WebKit (Chrome, Safari, Edge) */
.scroll::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.scroll::-webkit-scrollbar-track {
  background: #fce7f3;
}
.scroll::-webkit-scrollbar-thumb {
  background: #e11d48;
  border-radius: 9999px;
}
.scroll::-webkit-scrollbar-thumb:hover {
  background: #be123c;
}
.scroll::-webkit-scrollbar-thumb:active {
  background: #9f1239;
}
.scroll::-webkit-scrollbar-corner {
  background: #fce7f3;
}

524 characters | 27 linesIDE view - syntax highlighted

Keep exploring

Browse all →

CSS Tools

Border Generator

Design CSS borders with per-side width/style/color, linked or individual radii, presets, live preview, and IDE-ready CSS output.

Open tool

CSS Tools

CSS Button Generator

Design CSS buttons with solid, outline, soft, gradient, neon, 3D, and more presets — plus fonts, typography, icons, hover/focus/disabled states, and export-ready CSS.

Open tool

Answers

Frequently Asked Questions

Click a question to open it. Click again to close.

Looking for more? Browse Our Tools.

/* Firefox */ .scroll { scrollbar-width: thin; scrollbar-color: #e11d48 #fce7f3; } /* WebKit (Chrome, Safari, Edge) */ .scroll::-webkit-scrollbar { width: 10px; height: 10px; } .scroll::-webkit-scrollbar-track { background: #fce7f3; } .scroll::-webkit-scrollbar-thumb { background: #e11d48; border-radius: 9999px; } .scroll::-webkit-scrollbar-thumb:hover { background: #be123c; } .scroll::-webkit-scrollbar-thumb:active { background: #9f1239; } .scroll::-webkit-scrollbar-corner { background: #fce7f3; }

Scrollbar

Related tools

Border Generator

CSS Button Generator

Frequently Asked Questions

01Do I need both WebKit and Firefox CSS?

02Why doesn’t my scrollbar look the same everywhere?

03What does scrollbar-gutter: stable do?

04What is an HTML color code?

05How do I convert HEX to RGB?

Scrollbar

Related tools

Border Generator

CSS Button Generator

Frequently Asked Questions

01Do I need both WebKit and Firefox CSS?

02Why doesn’t my scrollbar look the same everywhere?

03What does scrollbar-gutter: stable do?

04What is an HTML color code?

05How do I convert HEX to RGB?