CSS Scrollbar Styler
Design custom scrollbars with live preview. Style width, colors, border-radius and more. Generates both Webkit and Firefox compatible CSS.
Custom Scrollbar Preview
Scroll down to see your styled scrollbar in action. Adjust the controls on the right to customize the appearance.
CSS custom scrollbars let you match the scrollbar design to your website or application theme. You can control the width, colors, border radius, and borders.
Webkit-based browsers (Chrome, Safari, Edge) support detailed scrollbar styling with pseudo-elements like ::-webkit-scrollbar, ::-webkit-scrollbar-track, and ::-webkit-scrollbar-thumb.
Firefox uses the simpler scrollbar-width and scrollbar-color properties, which offer less customization but good basic control.
Best practice is to include both Webkit and Firefox properties for maximum browser compatibility. The generated code below includes both.
Try different presets to get started quickly, then fine-tune the individual properties to match your design system.
Consider accessibility when styling scrollbars. Make sure the thumb has enough contrast against the track so users can easily identify and use it.
You can also add a border to the thumb to create a floating effect, especially when combined with a matching border color to the track background.
This preview area contains enough content to demonstrate vertical scrolling. Resize your browser to test responsiveness as well.