Custom Scrollbar CSS Generator
Custom scrollbars that work in every browser, previewed in a scrolling box.
Preview
Scroll this box up, down and sideways.
A scrollbar is part of the interface people use: the thumb shows where they are and how much is left. Keep it easy to see against its track and large enough to grab, and test it with a mouse, a trackpad and a touch screen.
On macOS with overlay scroll bars, and on phones, standard scrollbars appear only while you scroll. Styling ::-webkit-scrollbar with a width makes the bar permanent in Chromium and desktop Safari.
The standard properties set the thumb and track colors and a thin or automatic width. The ::-webkit-scrollbar rules add an exact width, rounded corners, a border around the thumb and a hover color.
Keep scrolling to the end of this text to see how the thumb behaves near the bottom.
Presets
Look
Options
Code
About the Custom Scrollbar CSS Generator
Design a scrollbar — its width, thumb and track colors, corner radius, the space or border around the thumb, and a hover color — and preview it in a real scrolling box. The generator writes both ways browsers understand: the standard scrollbar-color and scrollbar-width properties from the CSS Scrollbars specification, and the ::-webkit-scrollbar pseudo-elements for Safari and older Chromium, arranged with @supports so each browser uses the right one.
Choose whether the standard properties or the more detailed ::-webkit-scrollbar look should win in Chrome and Edge, hide scrollbars while keeping the content scrollable, reserve their space with scrollbar-gutter, and copy the result as CSS or as Tailwind CSS classes.
How to use it
- Start from a preset or set the scrollbar width, thumb, hover and track colors, the corner radius and the space or border around the thumb.
- Choose the standard width (
auto,thinornone) that Firefox, Chrome, Edge and Safari use with the standard properties. - Pick a strategy: Standard first (recommended) or Custom look in Chromium and Safari.
- Scroll the preview; switch it between the standard properties and the
::-webkit-scrollbarrules to see both. - Enter your selector and copy the CSS, or copy the Tailwind classes.
Examples
.scroller · 12 px · thumb #64748b, hover #475569, track #f1f5f9 · pill · 3 px inset
@supports (scrollbar-color: auto) {
.scroller {
scrollbar-width: thin;
scrollbar-color: #64748b #f1f5f9;
}
.scroller:hover {
scrollbar-color: #475569 #f1f5f9;
}
}
@supports not (scrollbar-color: auto) {
.scroller::-webkit-scrollbar {
width: 12px;
height: 12px;
}
…
}Hidden preset · html
html {
scrollbar-width: none;
}
html::-webkit-scrollbar {
display: none;
}Common uses
- Matching scrollbars to a dark theme or brand colors.
- Thin, unobtrusive scrollbars in sidebars, chat panels, code blocks and dropdown menus.
- Horizontal scrollers (carousels, tables) with a visible, styled bar.
- Stopping layout shift when scrollbars appear, with scrollbar-gutter.
Two ways to style scrollbars
- Standard properties (CSS Scrollbars Styling):
scrollbar-color: <thumb> <track>andscrollbar-width: auto | thin | none. They are simple and respected by Firefox, Chrome and Edge 121+, and Safari (scrollbar-widthfrom 18.2,scrollbar-colorfrom 26.2) — see MDN for scrollbar-color and scrollbar-width. They cannot set an exact width, a radius or a hover state. - **
::-webkit-scrollbar** and its parts (track, thumb, corner): non-standard, but supported by Chromium and desktop Safari, with full control over width, radius, borders and:hover. In Chromium and WebKit the standard properties take precedence once they are set, and Safari on iPhone and iPad ignores these pseudo-elements exceptdisplay: none.
Which strategy should I choose?
Standard first sends the standard properties to every browser that has scrollbar-color and keeps the ::-webkit-scrollbar rules for older Chromium and Safari. Both halves sit inside @supports, so a Safari version that knows scrollbar-width but not scrollbar-color still gets your colors. Your radius, border and exact width then show only in those older browsers.
Custom look in Chromium and Safari uses the ::-webkit-scrollbar rules wherever they exist, so Chrome, Edge and desktop Safari show your exact design, and gives the standard properties only to browsers without ::-webkit-scrollbar (Firefox), through @supports not selector(::-webkit-scrollbar). Firefox 153 and 154 briefly reported support for that selector, so they keep their default scrollbar colors with this option.
Overlay scrollbars on macOS and phones
When macOS is set to show scroll bars only while scrolling, and on touch devices, the standard properties keep the system’s overlay scrollbars: they float over the content and appear while you scroll, with your thumb color (the track color usually shows only while the pointer is over the bar, and the system decides how translucent the bar is). Giving ::-webkit-scrollbar a width turns them into classic scrollbars that are always visible and take up space (Chrome’s scrollbar styling guide). Scroll the preview to see what your browser does in overlay mode.
Accessible scrollbars
A scrollbar is a control: keep the thumb clearly visible against the track (the tool shows their contrast; once you restyle a scrollbar, WCAG 1.4.11 asks 3 : 1 for the parts of a control people need to see), do not make it so thin that it is hard to grab with a mouse, and only hide scrollbars where another cue shows that the content scrolls. scrollbar-gutter: stable reserves the scrollbar’s space so the layout does not jump when content starts to overflow.
Limitations
- With the standard properties, browsers apply only the colors and the thin/auto width; iOS Safari keeps its own scrollbars.
- The arrow buttons some systems show are not styled (with the ::-webkit-scrollbar rules they are left out).
- The preview uses your browser, so it shows what that browser does — check in the others you support.
- The Tailwind classes use arbitrary values and variants (Tailwind CSS v3.1 or later, or v4).
Privacy
Everything happens in your browser. What you enter or open here is not uploaded or stored by MySmartCoPilot.
Frequently asked questions
Why do my ::-webkit-scrollbar styles no longer work in Chrome?
Since Chrome 121, Chromium supports the standard scrollbar-color and scrollbar-width, and once either is set on an element it uses them instead of ::-webkit-scrollbar. Choose Custom look in Chromium and Safari to keep your ::-webkit-scrollbar design there.
Does Safari support scrollbar-color?
Safari supports scrollbar-width from version 18.2 and scrollbar-color from 26.2; older versions use ::-webkit-scrollbar, which the generated CSS covers. On iPhone and iPad, Safari draws its own overlay scrollbars.
How do I hide a scrollbar but keep scrolling?
Choose the Hidden preset: scrollbar-width: none for the standard browsers and ::-webkit-scrollbar { display: none; } for the rest. The content still scrolls with the wheel, trackpad and touch, and with the keyboard when focus is inside it. Show another cue (a shadow, a partly visible next item) so people know there is more.
Can I style scrollbars for the whole page?
Yes: use html as the selector. For every scrolling element, use a list such as html, .panel, textarea — the generator adds the scrollbar parts to each item.
Is anything uploaded?
No. The CSS is generated in your browser and the page works offline once loaded.