Smart Tools Utility

CSS Custom Scrollbar Generator

Color • Thickness • Rounded Corners • WebKit + Standard Syntax

Specific Element targets a class you add to any scrollable container (shown in the box below). Entire Page targets the whole browser window — when selected, watch the real scrollbar at the edge of this page.
Thickness10px
Corner Radius8px
Live Preview — Scroll Inside the Box
Scroll me!

This is a live scrollable area so you can see exactly how your custom scrollbar looks and behaves while scrolling, not just a static illustration.

Modern CSS offers two ways to style a scrollbar: the widely-supported ::-webkit-scrollbar pseudo-elements (Chrome, Safari, Edge, Opera) for full control over thickness, colors, and rounded corners, and the standardized scrollbar-width / scrollbar-color properties for Firefox and spec-compliant browsers.

Keep scrolling to see the whole track and thumb in action, including the hover color change when your cursor moves over the thumb.

Adjust the controls on the left — thickness, radius, colors, and the inset thumb toggle — and this preview updates immediately.

Once you're happy with the look, copy the generated CSS below and paste it into your stylesheet.

End of the sample content — scroll back up to try different settings.

CSS Code

                    

                

            

                    
        

    


    
    

        

            
 About

            
 Contact

        

        

            
About CSS Custom Scrollbar Generator

            
This tool generates CSS to restyle a browser scrollbar — thickness, track and thumb colors, hover color, and rounded corners — using both of the syntaxes modern CSS provides. WebKit-based browsers (Chrome, Safari, Edge, Opera) support the detailed ::-webkit-scrollbar family of pseudo-elements, giving full control over every part of the scrollbar. Firefox and other spec-compliant browsers instead use the standardized scrollbar-width and scrollbar-color properties, which offer less granular control (only a thumb color and a track color, and a width of thin/auto/none) but are the official CSS Scrollbars specification. This generator outputs both together so the result looks intentional across browsers rather than defaulting to native scrollbars on non-WebKit browsers. Choose whether to apply the style to a specific scrollable element (add the generated class to any container with overflow) or to the entire page. All processing happens locally in your browser.

        

        
    


    
    
    

        

            

                
                All CSS & Web Design →