CSS Scrollbar Styler

Customize your scrollbar and copy ready-to-use CSS for WebKit and Firefox.

Controls

Scrollbar Width Mode

Custom Width: 10px

Track Color

Thumb Color

Thumb Hover Color

Thumb Border-Radius: 6px

Track Border-Radius: 0px

Live Preview

Scroll me to see your custom scrollbar in action. This preview box contains enough content to make scrolling necessary so you can see exactly how your scrollbar looks.

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.

Customize width, colors, and border-radius with the controls on the left. Your changes update the preview in real time.

Copy the generated CSS for WebKit (Chrome, Safari, Edge) or Firefox using the tabs below.

Use presets for quick starting points — then fine-tune to match your design system.

Try the "Hidden" preset to remove scrollbars while keeping scroll functionality.

Preview reflects your current settings.

Apply to element (CSS selector): Leave body for global styles.

WebKit (Chrome/Safari/Edge)

Firefox

Combined

Browser Compatibility

Property	Chrome	Firefox	Safari	Edge
`::-webkit-scrollbar`	Yes	No	Yes	Yes
`scrollbar-width`	121+	Yes	16+	121+
`scrollbar-color`	121+	Yes	16+	121+
Hover effects	Yes (WebKit)	Not supported	Yes (WebKit)	Yes (WebKit)

Tip: Use the Combined output to support all modern browsers. Firefox does not support per-element scrollbar hover colors.

Style buttons → CSS Button Generator

Customize animations → CSS Animation Generator

CSS variables → CSS Variables Generator