CSS Scrollbar Generator

Generate custom CSS scrollbars for your website visually. Customize scrollbar width, track color, thumb color, borders, and border-radius, and view live previews. Compatible with Chrome, Safari, Edge, and Firefox.

Customization

Width (Vertical) {{ scrollbarWidth }}px

Height (Horizontal) {{ scrollbarHeight }}px

Thumb Min Height {{ thumbMinHeight }}px

Firefox Width style

Color

Hover Color

Thumb Active Color

Border Radius {{ thumbRadius }}px

Border Width

Border Style

Border Color

Color

Track Hover Color

Track Active Color

Border Radius {{ trackRadius }}px

Border Width

Border Style

Border Color

Shadow Blur {{ shadowBlur }}px

Shadow Color

Shadow Opacity {{ shadowOpacity }}%

Inset Shadow

Legacy WebKit Compatibility

Include CSS Comments

Scrollbar Live Preview

Scrollable Preview Area

This is a scrollable container. You can drag the scrollbar on the right or bottom to test the scrolling behavior.

Adjust any properties in the left panel (such as size, color, borders, and radius) and watch this area update immediately.

This generator targets Chrome/Safari/Edge (which support rich options like borders, shadows, and hover styles) as well as Firefox.

Once you are happy with your scrollbar style, click "Copy CSS" to paste it into your project.