Scrollbar Styler
Preview and copy cross-browser CSS for styled scrollbars with colors, width, radius, and hover states.
Custom scrollbar CSS for modern browsers
Scrollbars can be styled with WebKit pseudo elements and the Firefox scrollbar-color property. Pick track and thumb colors, width, and corner radius, preview the result, then copy the CSS for your class selector.
Cross-browser notes
Firefox reads scrollbar-width and scrollbar-color. Chrome, Edge, and Safari use ::-webkit-scrollbar rules. Apply the generated block to any element with overflow auto or scroll.
Related developer tools
Format styles with the CSS Beautifier, minify with the CSS Minifier, and measure layout with the Screen Ruler.
Frequently Asked Questions
Will this work in every browser?
Modern Chromium, Safari, and Firefox support the included rules. Very old browsers keep the system scrollbar.
Can I target the whole page?
Yes. Use a selector such as html or body, or add the class to a scrollable panel.
Does hover color work everywhere?
Hover styles apply on WebKit browsers. Firefox uses the thumb color from scrollbar-color.
Related Tools
Mulch Calculator
Mortgage Interest Calculator
JSON to JSON Schema Generator
Particles Velocity Calculator
Price Per Ounce
Early Retirement Calculator
GraphQL To Flow Converter
Rate Constant Calculator
GraphQL To TypeScript MongoDB
Fraction to Mixed Number Converter
Midpoint Calculator
Transformer Sizing
Ductile Iron Pipe Calculator
Concrete Weight Calculator
Elastic Constants Calculator
Kelvin to RGB
BCD to Hex Converter
Typography Scale Generator
XML to Python POJO Generator
T Statistic Calculator