CSS Scrollbar Styler
NEWDesign custom scrollbars visually — width, track and thumb colours, hover state and radius — then copy WebKit and Firefox CSS.
The ::-webkit-scrollbar pseudo-elements style the scrollbar in Chrome, Edge,
and Safari. Firefox does not support them and instead uses the
scrollbar-width / scrollbar-color fallback included in the output.
Preview (scroll the box)
CSS
How to use Scrollbar Styler
- Set the scrollbar width and the track, thumb, and thumb-hover colours.
- Choose a thumb border-radius and optionally round the track.
- Scroll the live preview box to check the look in a WebKit browser.
- Click Copy CSS to copy both the WebKit and Firefox rules.
What is Scrollbar Styler?
This tool builds the CSS for a custom scrollbar from simple visual controls. Set the scrollbar width, the track and thumb colours, a thumb hover colour, the thumb's border-radius, and an optional rounded track. A scrollable preview box updates live so you can see the result before copying.
The output includes both the WebKit pseudo-element block (::-webkit-scrollbar and its track, thumb, and thumb-hover parts) used by Chrome, Edge, and Safari, and a scrollbar-width / scrollbar-color fallback that Firefox understands. Everything runs in your browser.
FAQ
- Why doesn't the preview look styled in Firefox?
- Firefox does not support the WebKit ::-webkit-scrollbar pseudo-elements. It instead uses the scrollbar-width and scrollbar-color fallback, which only allows a thin or auto width and a thumb/track colour pair — both of which are included in the copied CSS.
- How do I apply the copied CSS to a specific element?
- The output targets a .scrollbox class. Add that class to the scrollable element you want to style, or replace .scrollbox with your own selector before pasting it into your stylesheet.
Related tools
People also use
- Border Radius Generator🗄️ Developer Tools
Visually craft CSS border-radius — independent corners, px/%/em units, and organic blob shapes. Live preview and copy-paste CSS. Runs in your browser.
- Clip Path Generator🗄️ Developer Tools
Create CSS clip-path shapes visually — polygons, circles, insets and 20+ presets with draggable points. Live preview and copy-paste CSS, in your browser.
- CSS Button Generator🗄️ Developer Tools
Design a CSS button visually — padding, colors, gradients, border-radius, shadow and hover effects — with a live preview, then copy the CSS. In-browser.
Last updated: