CSS Scrollbar Style Generator

This is a live preview of your custom scrollbar. Scroll down to see it in action!

CSS scrollbars can be styled using ::-webkit-scrollbar pseudo-elements for Chrome, Safari, Edge, and Opera.

Firefox uses scrollbar-width and scrollbar-color properties for basic customization.

Custom scrollbars improve the look and feel of your website, making it cohesive with your design system.

Control width, colors, border-radius, and hover effects of the thumb and track independently.

The thumb is the draggable part, while the track is the background area behind it.

Hover effects add interactivity, giving users visual feedback when they interact with the scrollbar.

Keep scrolling to test your custom scrollbar style in this preview area.

Try adjusting the settings on the left to see changes in real-time right here.

When you are happy with the result, copy the generated CSS code below.