CSS Scrollbar Customizer
Generate custom scrollbar CSS with visual controls. Design WebKit and Firefox scrollbar styles — width, colors, border radius, hover states.
Scroll down to see the custom scrollbar in action
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, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
You made it to the bottom! The scrollbar is fully customized.
About this tool
The CSS Scrollbar Customizer lets you visually design custom scrollbar styles for both WebKit (Chrome, Safari, Edge) and Firefox browsers. Adjust the scrollbar width, track color, thumb color, thumb hover color, and thumb border radius — each change reflects immediately in the live preview area.
Example: set Width to 8px, Track to #f0f0f0, Thumb to #4a7aef with hover #2d5bd6, and Border Radius to 4px — you get a sleek, branded scrollbar that blends into your UI. The generated CSS includes both the ::-webkit-scrollbar pseudo-elements for WebKit browsers and the scrollbar-width / scrollbar-color shorthand for Firefox, ready to paste into your project.
Use the Share Link button to save or share your configuration as a URL — opening it restores every slider and color exactly.
FAQ
Why are custom scrollbars different for WebKit and Firefox? ›
WebKit browsers (Chrome, Safari, Edge) use the ::-webkit-scrollbar pseudo-element system for full visual control over width, track, thumb, and hover states. Firefox uses the scrollbar-width and scrollbar-color properties as a shorthand — it supports fewer visual options but is more future-proof. This tool generates both so your custom scrollbar works across all modern browsers.
Can I use a custom scrollbar on a specific element? ›
Yes. Replace the ::-webkit-scrollbar selectors with a scoped selector, e.g. .my-sidebar::-webkit-scrollbar. For Firefox, apply the .custom-scrollbar class to your element. The generated CSS uses .custom-scrollbar as the example class — rename it to match your project.
Should I always use thin? ›
scrollbar-width: thin is used by default because it makes the custom track and thumb more visible, especially on thick system scrollbars. You can remove it or change it to auto if you want the browser to control the width and only use custom-color mode.
Do custom scrollbars affect mobile? ›
No. Mobile browsers typically hide scrollbar overlays or use platform-native touch scroll indicators that ignore CSS scrollbar styling. Custom scrollbars primarily affect desktop browsers where users interact with visible scrollbar tracks.