📜

Custom Scrollbar CSS

Style browser scrollbars with CSS — webkit and Firefox support. Copy the generated code instantly.

This is a scrollable preview area. Adjust the controls on the right to customize the scrollbar appearance in real time.

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 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.

Live Preview — scroll the box to see the styled scrollbar

Track Color

Thumb Color

Thumb Hover

Thumb Width px

Thumb Radius px

Track Radius px

Generated CSS (Webkit + Firefox)

Chrome/Safari/Edge: Uses ::-webkit-scrollbar pseudo-elements. Firefox: Uses scrollbar-width and scrollbar-color (supports two colors: thumb track). Mobile browsers: Most mobile browsers don't display scrollbars by default, so these styles mainly affect desktop.

About Custom Scrollbar CSS

Designing for the web often involves fine-tuning visual properties until they look just right. Custom Scrollbar CSS gives you an interactive playground to style browser scrollbars with css — webkit and firefox support. copy the generated code instantly and instantly see the result. When you're happy with the output, copy the generated CSS code and paste it into your stylesheet — no guesswork needed.

How to Use

Adjust the visual controls Use sliders, color pickers, and dropdowns to customize the design properties. The preview updates in real time.

Fine-tune the result Experiment with different values until the design looks exactly the way you want it.

Copy the CSS code Click the Copy button to copy the generated CSS code. It's production-ready and includes vendor prefixes where needed.

Paste into your project Add the copied CSS to your stylesheet. The code works in all modern browsers without modification.

🔒 Privacy note: All processing happens locally in your browser. Your data is never sent to any server.

Why Use Custom Scrollbar CSS?

🎨

Visual Live Preview See your changes in real time as you adjust values. No more guessing what CSS properties will look like — experiment visually and copy the code.

📋

Production-Ready CSS The generated code is clean, optimized, and ready to paste directly into your stylesheet. Includes vendor prefixes where needed for cross-browser support.

🔧

Faster Than Hand-Coding What takes 10 minutes of CSS trial-and-error takes 10 seconds with Custom Scrollbar CSS. Adjust sliders and dropdowns instead of editing numbers in code.

💡

Learn CSS Visually Perfect for CSS beginners who want to understand how properties affect visual output. Experiment with values and see the relationship between code and design.

Frequently Asked Questions

Firefox uses a different (standard) approach: scrollbar-width and scrollbar-color CSS properties. The -webkit-scrollbar pseudo-elements are a non-standard WebKit/Blink extension. This tool generates both so you get coverage across all modern browsers. The two approaches cannot achieve the same level of customization — Firefox only supports thumb and track color control.

Firefox supports scrollbar-color: thumbColor trackColor and scrollbar-width: auto | thin | none. These are CSS properties applied directly to the scrollable element. scrollbar-width: thin makes the scrollbar thinner. scrollbar-color accepts two color values: the first for the thumb, the second for the track.

Mobile browsers (iOS Safari, Android Chrome) typically hide scrollbars entirely or display them as minimal overlays that disappear after scrolling. Custom scrollbar CSS generally has no effect on mobile. For mobile-specific overflow UI, consider using scrollbar-width: none to fully hide scrollbars and build custom scroll indicators using JavaScript.