Create custom CSS scrollbar styles with live preview. Adjust width, colors, track, thumb, and hover effects. Generate cross-browser CSS for WebKit and Firefox instantly. 100% client-side.
Scroll this area to see your custom scrollbar style in action. This demo container shows exactly how the generated CSS will look when applied to scrollable content.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.
Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur.
/* Scrollbar styles will appear here */The CSS Scrollbar Generator creates custom scrollbar styles using WebKit and standard scrollbar CSS properties. Customize every aspect of your scrollbar — width, colors, track, thumb, and hover effects — and get production-ready cross-browser CSS instantly. This tool supports both WebKit browsers (Chrome, Safari, Edge) and Firefox with the scrollbar-color and scrollbar-width properties. All processing happens in your browser — no data is sent anywhere.
The generated CSS includes both WebKit scrollbar properties (for Chrome, Safari, Edge) and standard scrollbar-color/scrollbar-width properties (for Firefox). Browsers that do not support custom scrollbars (like some older browsers) will simply display their default scrollbar. This is a progressive enhancement approach.
Absolutely! The generated CSS is completely free to use in personal, commercial, and open-source projects without any attribution required. The styles use standard CSS properties supported by all modern browsers.
To apply the scrollbar styles to your entire page, use the ::-webkit-scrollbar selector on the html or body element. The generated CSS includes both html and .scroll-container selectors so you can easily adapt it to your needs.
Firefox uses the scrollbar-width and scrollbar-color properties from the CSS Scrollbar Module Level 1 specification, while WebKit browsers (Chrome, Safari) use the ::-webkit-scrollbar pseudo-elements. Our generator produces both sets of rules for maximum cross-browser compatibility.