CSS Scrollbar Generator

Style your website’s scrollbars with custom colours and shapes. Adjust the controls, see a live preview and copy the CSS — free, private, and with no sign-up.

Live preview (scroll me)

Scrollbars are easy to overlook, but a styled scrollbar can tie your whole design together.

Use the controls to pick a width, track colour, thumb colour and hover colour, then watch this preview update instantly.

The generated CSS covers Chrome, Edge and Safari with the webkit selectors, plus Firefox with the standard scrollbar properties.

Rounded corners soften the look; square corners keep it sharp and minimal.

When you are happy, copy the CSS and paste it into your stylesheet.

CSS code












How to Use





    

  1. Drag the width slider and pick track, thumb and hover colours.
    2. 



  2. Adjust the corner radius for rounded or square scrollbar ends.
    3. 



  3. Scroll the live preview to see your style in action.
    4. 



  4. Click “Copy CSS” and paste it into your stylesheet, replacing .my-scroll with your own selector.
    5. 






Key Features





    

  • Live preview — the demo scrollbar updates the moment you change a control.
    • 



  • Full colour control — track, thumb and hover colours with easy colour pickers.
    • 



  • Firefox included — the standard scrollbar-width and scrollbar-color rules are generated too.
    • 



  • Copy-ready CSS — paste it straight into any project.
    • 



  • 100% private — everything runs in your browser and never sent to a server.
    • 






FAQs





Is this scrollbar generator free to use?





Yes. The generator is completely free with no sign-up, no usage limits and no hidden charges.





Does the CSS work in Firefox?





Yes. Alongside the webkit selectors for Chrome, Edge and Safari, the tool generates the standard scrollbar-width and scrollbar-color properties that Firefox uses.





Will styled scrollbars work on mobile?





Mobile browsers mostly use thin overlay scrollbars that ignore custom styling, so the effect is mainly for desktop visitors. The CSS is harmless where it is not supported.





Is my data uploaded or stored anywhere?





No. Everything runs locally in your browser using JavaScript, so nothing leaves your device.





Related Tools





CSS Border Radius Generator · Color Picker · Hex RGB Converter · CSS Button Generator · CSS Gradient Generator


	
	



	
	



			

			
		
	



	
 
	


	





	
                
                	Scroll to Top