CSS Scrollbar Generator | Custom Scrollbar CSS with Live Preview

CSS scrollbar generator builds custom scrollbar styles with a live preview, covering webkit scrollbar rules plus Firefox scrollbar-width and scrollbar-color. Free tool. Designed specifically for developers and professionals, this free online generator runs entirely in your browser to process tasks quickly and securely. Enjoy unlimited usage with no data tracking and no registration required.

Also known as: css scrollbar generator · custom scrollbar css generator online · webkit scrollbar styling generator · hide scrollbar css generator free · scrollbar color css generator · style scrollbar chrome and firefox · thin scrollbar css generator

css tools

color tools

generators

Quick Presets

Scrollbar Options

10px

Apply to

Hide the scrollbar completely (keeps the element scrollable)

Thickness

Track color

Thumb color

Thumb hover

Track radius

Thumb radius

Thumb inset

Firefox and standards width

Firefox ignores the pixel width and only accepts auto, thin, or none. The webkit rules above cover Chrome, Edge, and Safari.

Style the corner where both scrollbars meetReserve the gutter with scrollbar-gutter: stable (stops layout shift)

Live Preview

scroll both ways

Row 1 - this box scrolls vertically and horizontally so both bars are visible.

Row 2 - this box scrolls vertically and horizontally so both bars are visible.

Row 3 - this box scrolls vertically and horizontally so both bars are visible.

Row 4 - this box scrolls vertically and horizontally so both bars are visible.

Row 5 - this box scrolls vertically and horizontally so both bars are visible.

Row 6 - this box scrolls vertically and horizontally so both bars are visible.

Row 7 - this box scrolls vertically and horizontally so both bars are visible.

Row 8 - this box scrolls vertically and horizontally so both bars are visible.

Row 9 - this box scrolls vertically and horizontally so both bars are visible.

Row 10 - this box scrolls vertically and horizontally so both bars are visible.

Row 11 - this box scrolls vertically and horizontally so both bars are visible.

Row 12 - this box scrolls vertically and horizontally so both bars are visible.

Row 13 - this box scrolls vertically and horizontally so both bars are visible.

Row 14 - this box scrolls vertically and horizontally so both bars are visible.

Row 15 - this box scrolls vertically and horizontally so both bars are visible.

Row 16 - this box scrolls vertically and horizontally so both bars are visible.

Row 17 - this box scrolls vertically and horizontally so both bars are visible.

Row 18 - this box scrolls vertically and horizontally so both bars are visible.

Row 19 - this box scrolls vertically and horizontally so both bars are visible.

Row 20 - this box scrolls vertically and horizontally so both bars are visible.

Row 21 - this box scrolls vertically and horizontally so both bars are visible.

Row 22 - this box scrolls vertically and horizontally so both bars are visible.

Row 23 - this box scrolls vertically and horizontally so both bars are visible.

Row 24 - this box scrolls vertically and horizontally so both bars are visible.

Row 25 - this box scrolls vertically and horizontally so both bars are visible.

Row 26 - this box scrolls vertically and horizontally so both bars are visible.

The preview applies the same rules scoped to this box. On macOS, set System Settings to "Always" show scroll bars to see them at rest.

Generated CSS

30 lines

743 chars

/* Chromium, Edge, Safari */
.custom-scrollbar::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

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

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #94a3b8;
  border-radius: 8px;
  border: 2px solid #f1f5f9;
  background-clip: padding-box; /* keeps the border transparent to the track */
}

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

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

/* Firefox and the CSS standard */
.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #94a3b8 #f1f5f9;
}

/* the element also needs to scroll */
.custom-scrollbar {
  overflow: auto;
}

About CSS Scrollbar Generator

Style a custom scrollbar with live preview and copy the CSS for Chrome, Edge, Safari, and Firefox in one block.

Key Features

Generates the full ::-webkit-scrollbar rule set plus the standard scrollbar-width and scrollbar-color properties, so the same CSS covers Chromium and Firefox
Live preview scrolls both ways, with presets for minimal, macOS, dark, thin, pill, neon, and fully hidden scrollbars
Handles the details that trip people up: background-clip padding-box for inset thumbs, the corner where both bars meet, and scrollbar-gutter: stable to stop layout shift

Use Cases

Match a dark-mode dashboard or sidebar to a scrollbar that does not look like default gray
Hide a scrollbar in a carousel or chat panel while keeping the element scrollable
Ship one scrollbar style that behaves the same in Chrome and Firefox without hunting through browser docs

Related Keywords

css scrollbar generator

custom scrollbar css

webkit scrollbar styling

hide scrollbar css

scrollbar color css generator

style scrollbar chrome firefox

Privacy & Security

All processing happens locally in your browser. Your data never leaves your computer, ensuring complete privacy and security.

Liked this tool?

DevToolLab is free to use. If this generator saved you some time today, please consider supporting our work.

Buy us a coffee ☕

Frequently asked questions

What is CSS Scrollbar Generator used for?

CSS scrollbar generator builds custom scrollbar styles with a live preview, covering webkit scrollbar rules plus Firefox scrollbar-width and scrollbar-color. Free tool.

Is CSS Scrollbar Generator free to use?

Yes. CSS Scrollbar Generator is completely free with no usage limits, and there is no paid tier required to use it.

Do I need an account to use CSS Scrollbar Generator?

No. CSS Scrollbar Generator works immediately in your browser with no signup, login, or email address required.

Related Tools

UUID Generator Online | Unique Identifier Generator

Generate universally unique identifiers (UUIDs) in multiple versions and formats. Perfect for database keys, API identifiers, and unique resource naming.

sql and database tools

encryption tools

Color Picker & Palette Generator | HEX RGB HSL Color Tool

Professional color picker tool with multiple format support, palette management, and advanced color manipulation features. Perfect for designers and developers.

color tools

random generators

Password Generator Online | Secure Random Passwords

Generate strong, secure passwords with customizable length and character sets. Cryptographically secure random generation for maximum security.

html tools

text tools

Text to Handwriting Generator | Converter

Text to handwriting generator turns typed text into realistic handwritten notes. Choose 10 fonts, lined or grid paper and ink colors, then export PNG or PDF.

text tools

color tools

More Tools You Might Like

Pastebin Online | Share Code & Text Snippets Free

Popular

Share code snippets, logs, and text with a shareable link. Syntax highlighting for 30+ languages, expiration controls, and password protection for Pro users.

text tools

password and key generators

math calculators

utilities

Use Tool

URL Tracker & Link Shortener | Track Clicks

Popular

Create short, trackable URLs with detailed click analytics. Track visitor location, devices, referrers, and more. Password protection & QR codes included.

text tools

password and key generators

url and link tools

networking

Use Tool

Webhook Receiver & Inspector | Test HTTP Webhooks

Popular

Generate a unique URL to easily test, receive and inspect HTTP webhooks in real-time. View request headers, query parameters, JSON payloads, and more.