Developer Tools
CSS Scrollbar Generator
Design a custom CSS scrollbar in your browser. Live preview, modern scrollbar-color, WebKit pseudo-elements, scoped class, and Tailwind shorthand.
Quick presets
Live preview
The scrollbar in the box below uses the exact CSS that the tool will copy. Scroll inside the box to test hover.
Orientation
scrollbar-width (modern)
Hidden uses scrollbar-width: none and ::-webkit-scrollbar { display: none } so the content still scrolls.
Thumb (the draggable handle)
Track (the channel behind the thumb)
Thumb hover color
Applied via ::-webkit-scrollbar-thumb:hover. Modern browsers do not expose a hover pseudo for the standard property yet.
Output options
CSS
.scrollbar-custom {
scrollbar-width: auto;
scrollbar-color: rgb(59 130 246) rgb(11 18 32);
&::-webkit-scrollbar {
width: 12px;
}
&::-webkit-scrollbar-track {
background: rgb(11 18 32);
border-radius: 8px;
}
&::-webkit-scrollbar-thumb {
background-color: rgb(59 130 246);
border-radius: 8px;
border: 2px solid rgb(11 18 32);
background-clip: padding-box;
}
&::-webkit-scrollbar-thumb:hover {
background-color: rgb(96 165 250);
}
&::-webkit-scrollbar-corner {
background: rgb(11 18 32);
}
}Includes the modern scrollbar-color and scrollbar-width properties plus the legacy ::-webkit-scrollbar pseudo-elements.
Tailwind shorthand (modern only)
[scrollbar-width:auto] [scrollbar-color:rgb(59_130_246)_rgb(11_18_32)]
Uses Tailwind's arbitrary-value bracket syntax. WebKit pseudo-elements have no shorthand: use the full CSS block above for Safari and Chrome below 121 and Edge below 121.
Browser support
- scrollbar-colorFirefox 64+, Chrome / Edge 121+, Safari 18.2+
- scrollbar-widthFirefox 64+, Chrome / Edge 121+, Safari 18.2+
- ::-webkit-scrollbarChrome, Edge, Safari, Opera (all versions); ignored by Firefox.
- Tailwind shorthandMaps to the modern properties only. Falls back to default scrollbar in older browsers.
How to use
- Pick a preset to start, or skip straight to the controls.
- Choose an orientation (vertical, horizontal, or both) and a scrollbar-width mode (auto, thin, or hidden).
- Tune the track and thumb: color, opacity, border radius, and optional inset padding around the thumb.
- Set a separate thumb hover color (mapped to ::-webkit-scrollbar-thumb:hover).
- Toggle Scope to a class on (recommended) and name the class. Copy the CSS into a stylesheet and add the class to any scrollable element.
About this tool
CSS Scrollbar Generator builds the CSS you need to style a scrollbar across every modern browser and shows the result in a live, scrollable preview that uses the exact rules the tool will copy. Pick an orientation (vertical, horizontal, or both), choose a thickness, and tune the track, the thumb, and the thumb hover state with separate colors, alpha, and corner radius. An inset padding control wraps the thumb in a track-colored border so the handle floats inside the channel, matching the look of most modern UIs. The output covers two layers at once. The modern layer uses the standardized scrollbar-color and scrollbar-width properties, supported in Firefox 64+, Chromium 121+ (Chrome and Edge, January 2024), and Safari 18.2+ (December 2024). The legacy layer uses the ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb:hover, and ::-webkit-scrollbar-corner pseudo-elements that older Safari and Chromium versions still need. Choose between a scoped class (recommended; ships as .scrollbar-custom and only affects elements you opt in) or a global ruleset (applies to html and to every webkit pseudo on the page). A Tailwind arbitrary-value shorthand is generated for projects that drop into an existing Tailwind workflow without a plugin. Presets cover dark blue, minimal light, neon, pastel, fully hidden (scrollbar-width: none), and a macOS-style translucent gray. Everything runs locally in your browser. No CSS, color value, or class name leaves your device.
Free to use. Works in your browser. No signup, no login.
Related tools
You may also like
CSS Gradient Generator
Linear, radial, and conic gradients with multi-stop editor and live preview.
Open tool
GeneratorCSS Border Radius Generator
Visual editor for border-radius with elliptical corners and copy-ready CSS.
Open tool
GeneratorCSS Box Shadow Generator
Layered box-shadow with live preview, opacity, inset, and Tailwind output.
Open tool
GeneratorCSS Glassmorphism Generator
Tune backdrop blur, tint, border, and shadow with a live preview and copy CSS, React, or Tailwind output.
Open tool
DeveloperCSS Formatter
Beautify minified CSS with indent, brace style, and sort options.
Open tool
GeneratorColor Picker
Visual color picker with eyedropper, native input, and live HEX, RGB, HSL, HSV, HWB, OKLCH, and Tailwind output.
Open tool