Design a custom scrollbar visually: pick the width, track and thumb colors, rounded corners, padding and hover color, then scroll the live preview. Copy cross-browser CSS that combines ::-webkit-scrollbar with the standard scrollbar-color and scrollbar-width properties.
Last updated:
Presets
Size & shape
px
px
px
px
px
Colors
Live preview
Scroll or drag the bars
Preview as
Apply to
Generated CSS
Advertisement
Advertisement
How to use the CSS Scrollbar Generator
Start from a preset such as Thin, Rounded or Dark, or keep the default.
Set the width and colors of the thumb (the draggable part) and the track (the rail behind it).
Adjust the shape: corner radius, padding around the thumb and the hover color.
Scroll the preview to try it, and choose whether the style applies to the whole page or only to elements with your class.
Copy the CSS and paste it into your stylesheet.
Scrollbar CSS properties explained
Selector / property
Browsers
What it styles
::-webkit-scrollbar
Chrome, Edge, Safari, Opera
The whole scrollbar: width for vertical bars, height for horizontal ones
::-webkit-scrollbar-track
Chrome, Edge, Safari, Opera
The rail the thumb slides in
::-webkit-scrollbar-thumb
Chrome, Edge, Safari, Opera
The draggable handle; supports :hover and :active
::-webkit-scrollbar-corner
Chrome, Edge, Safari, Opera
The square where a vertical and a horizontal scrollbar meet
scrollbar-color
Firefox, Chrome/Edge 121+
Two colors: thumb first, then track
scrollbar-width
Firefox, Chrome/Edge 121+
auto, thin or none (no pixel values)
Why the Firefox rules are wrapped in @supports
Chromium browsers now support both systems. When an element has scrollbar-color or scrollbar-width set, Chrome and Edge 121+ use those standard properties and ignore every ::-webkit-scrollbar rule, so rounded thumbs, padding and hover colors vanish. @supports not selector(::-webkit-scrollbar) applies the standard properties only in browsers that do not understand the WebKit pseudo-elements, which today means Firefox. If you prefer the simpler standard styling everywhere, untick the option.
Design tips
Make the thumb clearly darker (or lighter on dark themes) than the track; a 3:1 contrast keeps it easy to find.
A transparent border plus background-clip: padding-box creates a floating pill thumb without shrinking the clickable area of the scrollbar.
Style scrollbars of specific panels with a class instead of the whole page if you want the main page to keep the familiar system scrollbar.
Hiding scrollbars removes a visual cue that more content exists; if you hide them, add another hint such as a fade at the edge.
Frequently asked questions
How do I change the scrollbar color with CSS?
Use scrollbar-color: thumb-color track-color; this standard property works in Firefox and in Chrome and Edge 121+. For full control of size, rounded corners and hover colors in Chrome, Edge and Safari, also style the ::-webkit-scrollbar, ::-webkit-scrollbar-track and ::-webkit-scrollbar-thumb pseudo-elements. The generator outputs both.
Why are my ::-webkit-scrollbar styles ignored in Chrome?
Since Chrome 121, an element that has scrollbar-color or scrollbar-width set uses the standard properties and ignores ::-webkit-scrollbar. The generated CSS wraps the standard properties in @supports not selector(::-webkit-scrollbar), so Chromium and Safari keep the detailed WebKit styles while Firefox uses the standard ones.
Can I set an exact scrollbar width in Firefox?
No. Firefox only accepts scrollbar-width: auto, thin or none. The generator picks thin when your width is 10px or less and auto otherwise. Rounded corners, padding, gradients and hover colors are WebKit-only, so Firefox shows a simpler version in your chosen colors.
How do I hide the scrollbar but keep scrolling?
Set scrollbar-width: none for Firefox and ::-webkit-scrollbar { display: none; } for Chromium and Safari. The element still scrolls with the mouse wheel, touch and keyboard. Use it sparingly, because a visible scrollbar tells users there is more content.
How do I make space around the scrollbar thumb?
Give the thumb a transparent border and background-clip: padding-box. The border becomes a gap between the thumb and the edge of the track, making the thumb look like a floating pill. The Thumb padding slider controls this.
Do custom scrollbars work on phones?
Mobile browsers on iOS and Android use thin overlay scrollbars that appear only while scrolling, and most ignore custom scrollbar styles. Custom scrollbars matter mainly on desktop.
Are all the tools on FreeToolCabin tested for quality and accuracy?
Yes! Every tool on our site undergoes automated Q/A testing in real browser environments to ensure high precision, correct output, and zero errors. If you happen to spot a bug or have a suggestion, please contact us at [email protected] and our team will review it right away.