CSS Scrollbar Styler

Q: Why does the scrollbar look different in Firefox?

Firefox follows the W3C standard which only supports changing colors and width (auto/thin). It does not support advanced styling like border-radius found in WebKit browsers.

Q: Will this work on mobile?

Most mobile browsers enforce their own overlay scrollbars to save space, so custom CSS scrollbars often do not render on touch devices.

Q: How do I apply this to my whole website?

Change the class selector (e.g., .custom-scrollbar) in the generated code to 'body' or 'html' to apply it globally.

Q: What is the 'Spacing' setting doing?

It simulates padding/margins around the scrollbar thumb by adding a border that matches the track color, creating a 'floating' look.

Tools

CSS Scrollbar Styler

Add to Favorites Remove from Favorites

Dimensions & Shape

Width (px)

Roundness

Spacing

Colors

Thumb

Hover

Track

Preview Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Scroll down to see the effect.

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, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

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.

End of preview.

Copy CSS

About the CSS Scrollbar Styler

The default browser scrollbar is functional but rarely matches the beautiful design of a modern website. For years, developers had to use heavy JavaScript libraries to get custom scrollbars. Today, modern CSS allows us to style scrollbars natively across all major browsers using a combination of standard and vendor-specific properties.

This CSS Scrollbar Styler simplifies the process. Instead of remembering the complex differences between WebKit (Chrome/Safari) and standard (Firefox) implementations, you can use our visual editor. Adjust the track width, handle colors, and border radius using simple sliders, and the tool generates the complete, cross-browser compatible CSS code for you.

It handles the nuances automatically: it generates the ::-webkit-scrollbar pseudo-elements for Blink/Webkit browsers and the newer scrollbar-color and scrollbar-width properties for Firefox, ensuring your site looks consistent for all users. It also automatically hides the default up/down arrows for a cleaner look.

How to Use the Tool

Width: Adjusts the thickness of the scrollbar. Note that Firefox only supports "Auto" (standard) or "Thin", so the tool approximates this based on your pixel selection.
Roundness: Sets the `border-radius` of the scrollbar thumb (the moving part) and track.
Spacing: Creates spacing between the thumb and the track by using a border hack (setting a border on the thumb that matches the track background color).
Colors: Customize the Thumb (grabber), Track (background), and Hover state colors to match your brand.
Copy Code: Once satisfied with the live preview, copy the CSS and paste it into your stylesheet. You can apply it globally to the `body` or to specific containers (like `.custom-scrollbar`).

Frequently Asked Questions

Why does the scrollbar look different in Firefox?

Firefox follows the official W3C standard, which is currently more limited than the WebKit implementation. It only allows you to change the colors (scrollbar-color) and the width (scrollbar-width: thin/auto/none). It does not yet support detailed styling like border-radius or shadows on the scrollbar.

Will this work on mobile?

Mobile browsers (iOS Safari, Android Chrome) typically use overlay scrollbars that only appear when scrolling and are often not customizable via CSS to save screen space. However, these styles will apply if the user has a mouse connected or on some Android configurations.

How do I apply this to my whole website?

To apply the custom scrollbar to the entire page, simply replace the .custom-scrollbar selector in the generated code with body or html (depending on your layout structure).

What is the "Spacing" setting doing?

In WebKit browsers, you can't directly set a "margin" on the scrollbar thumb. To create the effect of the thumb "floating" inside the track with space around it, we add a transparent (or track-colored) border to the thumb and use background-clip: content-box logic.