browserutils

CSS Scrollbar Generator

Customize scrollbar styles with CSS

CSS Scrollbar Generator is a free online tool from BrowserUtils that customize scrollbar styles with css. It runs entirely in your browser — your data never leaves your device. No account required.

Scrollable content line 1
Scrollable content line 2
Scrollable content line 3
Scrollable content line 4
Scrollable content line 5
Scrollable content line 6
Scrollable content line 7
Scrollable content line 8
Scrollable content line 9
Scrollable content line 10
Scrollable content line 11
Scrollable content line 12
Scrollable content line 13
Scrollable content line 14
Scrollable content line 15
Scrollable content line 16
Scrollable content line 17
Scrollable content line 18
Scrollable content line 19
Scrollable content line 20
/* WebKit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #1a1a2e;
  border-radius: 5px;
}
::-webkit-scrollbar-thumb {
  background: #06b6d4;
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: #0891b2;
}

/* Firefox */
* {
  scrollbar-width: auto;
  scrollbar-color: #06b6d4 #1a1a2e;
}

How to use CSS Scrollbar Generator

  1. 1 Paste or type your input into the editor above.
  2. 2 The tool processes your data instantly — right in your browser, with nothing sent to a server.
  3. 3 Copy the result with one click or continue editing your input.

About CSS Scrollbar Generator

Free online CSS scrollbar style generator. Customize scrollbar track, thumb, and hover colors with live preview for WebKit browsers. This tool runs entirely in your browser — your data is never sent to a server. Just paste your input, get instant results, and copy with one click. No sign-up or installation required.

CSS Scrollbar Generator specs

Runtime
100% client-side (browser)
Built on
CSS Color Module Level 4 conversions (sRGB, OKLCH, OKLAB) and native CSSOM parsing
Cost
Free — no account, no rate limits, no usage caps
Browser support
Chrome 90+, Firefox 88+, Safari 14+, Edge 90+
Part of
299 developer tools on BrowserUtils (100% client-side)

Questions

Do custom scrollbars work in all browsers?
Custom scrollbar styles using ::-webkit-scrollbar work in Chrome, Edge, Safari, and Opera. Firefox supports scrollbar-color and scrollbar-width properties.
What parts of the scrollbar can I customize?
You can customize the scrollbar track (background), thumb (the draggable part), thumb hover state, width, and border-radius.
Does the CSS scrollbar generator output Firefox-compatible code?
The generator focuses on WebKit-based syntax, which covers Chrome, Edge, and Safari. For Firefox, you can use the scrollbar-color and scrollbar-width properties shown alongside the WebKit output.
Can I hide the scrollbar but keep scrolling?
Yes, set scrollbar-width: none for Firefox and ::-webkit-scrollbar { display: none } for WebKit browsers. The element will still scroll, but the scrollbar will be invisible.
Embed this tool

Copy this code to embed the tool on your website. Adjust the height to fit your layout.

<iframe src="https://www.browserutils.dev/embed/css-scrollbar-generator" width="100%" height="500" frameborder="0" title="CSS Scrollbar Generator"></iframe>

Related tools

CSS Gradient Generator
Create beautiful CSS gradients visually
Color Converter
Convert between HEX, RGB, and HSL color formats

More CSS & Design

Color ConverterCSS Gradient GeneratorBox Shadow GeneratorPX to REM ConverterColor Palette GeneratorColor Contrast CheckerTailwind Color PickerCSS Animation Generator
View all CSS & Design tools