How to use Custom Scrollbar Generator
- Choose the width and colors.
- Scroll the preview box to see the result.
- Copy the CSS and apply the class to your scrolling element.
About this tool
Chrome, Edge and Safari use the ::-webkit-scrollbar pseudo-elements, while Firefox and recent Chrome versions support the standard scrollbar-color and scrollbar-width properties. The generated CSS includes both so the result is consistent.
Keep scrollbars wide and contrasting enough to grab easily, especially on touch screens.
Frequently Asked Questions
- Can I style scrollbars on iPhone?
- iOS uses overlay scrollbars that cannot be customised.
- How do I style the whole page scrollbar?
- Apply the rules to the html element or use ::-webkit-scrollbar globally.
Related tools
- CSS Button GeneratorCreate a styled button and copy its CSS, including the hover state.
- CSS Border Radius GeneratorRound each corner separately and copy the CSS.
- SVG Blob GeneratorGenerate organic blob shapes and copy the SVG.
- CSS Text Shadow GeneratorAdd depth or a glow to text and copy the CSS.
- PX to REM ConverterConvert between pixels and rem for scalable CSS.
- CSS Clamp GeneratorCreate fluid sizes that grow between a minimum and maximum viewport.