📜 CSS Custom Scrollbar Generator
Style the track, thumb, hover state, width and corner radius of a scrollbar, and get CSS for both the modern standard properties and the WebKit-prefixed pseudo-elements.
scrollbar-width / scrollbar-color properties, while Chrome, Edge, Opera and older Safari rely on the non-standard ::-webkit-scrollbar family of pseudo-elements. An engine that supports the standard properties generally ignores the WebKit pseudo-elements, and vice versa — so this tool outputs both for the widest coverage. Note the standard scrollbar-width property only accepts auto, thin or none (no arbitrary pixel value) and has no hover state — a custom width and the thumb-hover color only take effect in WebKit-based browsers.
1. Scrollbar style
2. Live preview
Scroll inside the box below — its scrollbar uses whatever your browser actually supports from the CSS on the right.
Scroll this box to see your scrollbar styling in action. What you see depends on your browser engine — Chromium and Safari render the WebKit pseudo-elements, Firefox renders the standard properties.
Paragraph two of filler content, just here to make the box tall enough to actually need a scrollbar in the first place.
Paragraph three. The quick brown fox jumps over the lazy dog, over and over, to make sure there's enough content here.
Paragraph four. Still scrolling — almost there.
Paragraph five. This is the last paragraph in the preview box.