Does the CSS scrollbar work in Firefox?

Firefox does not support the::-webkit-scrollbarpseudo-elements, but it does support thescrollbar-color and scrollbar-widthproperties. The generator creates both versions, so the effect is visible in any modern browser.

Can I use any color - not just hex?

Yes. The color field accepts any CSS value:#hex, rgb(), rgba(), hsl()and named colors (red, transparent). Just make sure the value is syntactically correct.

How do CSS selectors work in the generator?

Type CSS selectors separated by enters or commas - e.g.body, .scroll-area, #sidebar. The generator will apply the scrollbar style to each one individually, giving you precise control over the appearance in different sections of the page.

What does the "Thumb Gradient" option do?

Turning on the gradient replaces the single-color thumb fill with a linear gradient from the base color to the final color. The effect is subtle and gives the strap a modern look, especially with greater thickness.

CSS Scrollbar Styler

Fast, accurate, and free online CSS Scrollbar Styler tool that runs directly in your browser.

Secure (SSL)

Client-Side Processing

100% Free

Go to tool

Instructions

1

Enter data
Enter content, paste text or load a file from disk.
2

Click the button
The tool will immediately process your data in the browser.
3

Get the result
Copy the finished text or save the file to your device.

                                                function runTool() {

                                                  return "Result ready in 0.1s";

                                                }

Scroll bar parameters

CSS selectors

36 / 5000 characters

Thickness 10px

Rounding 12px

Colors (Light Mode)

Track background

Thumb color

Thumb hover

Active thumb

Additional options

Thumb border 2px

Border color

Thumb shadow 6px

Shadow color

Thumb gradient Gradient fill

Gradient end color

Navigation buttons Scrollbar arrows

Comment in CSS Header comment block

Dark mode Add dark mode variant

Colors (Dark Mode)

Track background (dark)

Thumb (dark)

Hover (dark)

Active (dark)

Dark mode trigger

Firefox width

Output format

Live View

Try out your scrollbar!

Change parameters in the left panel (such as thickness, colors or rounding), and the slider of this field will immediately adapt to your settings.

This preview container simulates the actual behavior of scrollbar CSS styles. You can scroll it vertically, hover over it and click on the slider.

Scrollbar Styler allows you to fully customize the scrollbar in WebKit-based browsers (Chrome, Safari, Edge, Opera) using pseudo-elements, as well as in Firefox using native properties.

This gives your website a consistent, professional and unique look on all devices.

Generated CSS

3 Selektory 3,125 B Size 2,561 B After minification 18% Savings

Rate this tool:

Related tools

Other tools you may find useful

CSS Scrollbar Styler - Online Code Generator

Design your own scrollbar for any web page. Choose colors, rounding, thickness and dark mode options - the tool will generate ready-made CSS code compatible with Chrome, Edge, Safari and Firefox.

CSS Scrollbar::-webkit-scrollbarscrollbar-colordark modecross-browser

What is scrollbar styling?

The scrollbar is an element of the browser interface that allows you to navigate through the content of the page. Thanks to CSS, you can change its appearance - color, shape and size. The::-webkit-scrollbarpseudo-elements support Chrome, Edge and Safari, and thescrollbar-colorproperty works in Firefox. The generator creates ready code for both engines simultaneously.

What options does the tool offer?

You can set the bar thickness (2-32 px), thumb roundness (0-24 px), track and thumb colors in light and dark mode, thumb gradient, shadow, border and navigation buttons. Dark mode can be triggered byprefers-color-schemeor your own CSS class. Export to a minified form is also available.

Browser compatibility

The generated code works in Chrome, Edge and Safari thanks to the pseudo-elements::-webkit-scrollbar-*and in Firefox thanks to thescrollbar-color and scrollbar-width property. For older versions of Firefox, the tool allows you to selectthinor hide the bar completely.

How to paste the code into the page?

Copy the generated CSS and paste it into your stylesheet file or the


        

            
            
                
                    
                
                
                    Fast online tools for work, study and files. They run in your browser - no installation or registration required.
                
                            

            
                            
                    
                                                        
 About Us  |  Privacy Policy  |  Terms of Service  |  Contact 

                                                
                
                    

        
        
                                            

 
© 2026 WebP Tools — All rights reserved.



                    
        


      






        
        
            
                
            
            
                Install Webp.pl
                Have the tools in your own pocket!