Does this CSS scrollbar generator work in all browsers?

The generator outputs two blocks of CSS: ::-webkit-scrollbar rules for Chromium-based browsers (Chrome, Edge, Opera) and Safari, and the standard scrollbar-color / scrollbar-width properties for Firefox. Internet Explorer does not support custom scrollbar CSS via these properties.

How do I apply the generated CSS to only one element?

Replace the .scrollable selector in the generated code with your own CSS class or element selector. For example, use .my-container::-webkit-scrollbar to style the scrollbar of a specific div rather than the whole page.

What is the difference between scrollbar-width and -webkit-scrollbar width?

scrollbar-width is the Firefox standard property and accepts thin, auto, or none — it doesn't accept pixel values. ::-webkit-scrollbar:width is a Chrome/Safari/Edge pseudo-element that accepts any CSS length like 8px or 12px. This tool generates both so your styles work across all major browsers.

Can I hide the scrollbar but keep scroll functionality?

Yes. Set the scrollbar width to 0px and the tool will output ::-webkit-scrollbar { width: 0; } combined with scrollbar-width: none for Firefox. The element remains scrollable but the scrollbar is invisible.

Does custom scrollbar CSS affect mobile browsers?

On iOS Safari and most Android browsers, the OS controls scrollbar appearance and custom CSS is ignored. The generated CSS only affects desktop browsers. On mobile, scrollbars are typically hidden by default unless the user is actively scrolling.

Pure CSS — No JavaScript

Style Your Scrollbars
Visually

Pick colors, set width and border radius, see it live, and copy production-ready CSS for Chrome, Safari, Edge, and Firefox — in seconds.

🎨

Live Preview

See your scrollbar exactly as it will appear in the browser while you adjust controls.

📋

Two Formats

Generates both ::-webkit-scrollbar CSS for Chrome/Safari/Edge and scrollbar-color for Firefox.

⚡

One-Click Copy

Copy the complete CSS to your clipboard and drop it straight into your stylesheet.

Controls

Dimensions

Width10px

Border Radius6px

Colors

Track

#E2E8F0

Track Opacity100%

Thumb

#6366F1

Thumb Opacity100%

Thumb Hover

#4F46E5

Output

Webkit (Chrome / Safari / Edge)Standard (Firefox)

Selector

Live Preview

Line 1 — Scroll down to see more content in this preview box.

Line 2 — Scroll down to see more content in this preview box.

Line 3 — Scroll down to see more content in this preview box.

Line 4 — Scroll down to see more content in this preview box.

Line 5 — Scroll down to see more content in this preview box.

Line 6 — Scroll down to see more content in this preview box.

Line 7 — Scroll down to see more content in this preview box.

Line 8 — Scroll down to see more content in this preview box.

Line 9 — Scroll down to see more content in this preview box.

Line 10 — Scroll down to see more content in this preview box.

Line 11 — Scroll down to see more content in this preview box.

Line 12 — Scroll down to see more content in this preview box.

Line 13 — Scroll down to see more content in this preview box.

Line 14 — Scroll down to see more content in this preview box.

Line 15 — Scroll down to see more content in this preview box.

Line 16 — Scroll down to see more content in this preview box.

Line 17 — Scroll down to see more content in this preview box.

Line 18 — Scroll down to see more content in this preview box.

Line 19 — Scroll down to see more content in this preview box.

Line 20 — Scroll down to see more content in this preview box.

Generated CSS

/* Chrome, Safari, Edge */
.scrollable::-webkit-scrollbar {
  width: 10px;
}

.scrollable::-webkit-scrollbar-track {
  background: #e2e8f0;
  border-radius: 6px;
}

.scrollable::-webkit-scrollbar-thumb {
  background: #6366f1;
  border-radius: 6px;
}

.scrollable::-webkit-scrollbar-thumb:hover {
  background: #4f46e5;
}

/* Firefox */
.scrollable {
  scrollbar-width: auto;
  scrollbar-color: #6366f1 #e2e8f0;
}

Frequently Asked Questions

Everything you need to know about CSS Scrollbar Generator.

Style Your ScrollbarsVisually

Live Preview

Two Formats

One-Click Copy

Controls

Frequently Asked Questions

Style Your Scrollbars
Visually