CSS Scrollbar Styler
Create custom CSS scrollbar styles with visual controls.
/* Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888888;
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
background: #555555;
}
/* Firefox */
* {
scrollbar-width: auto;
scrollbar-color: #888888 #f1f1f1;
}How to Use the CSS Scrollbar Styler
Use the sliders and color pickers to customize your scrollbar appearance. Adjust the scrollbar width, pick colors for the track, thumb, and thumb hover state, and set the thumb border radius. The preview area updates in real time so you can see exactly how your scrollbar will look. When you're happy with the design, click "Copy CSS" to copy the generated code.
Frequently Asked Questions
Does custom scrollbar CSS work in all browsers?
Webkit-based browsers (Chrome, Safari, Edge) support ::-webkit-scrollbar pseudo-elements for full control. Firefox supports the scrollbar-width and scrollbar-color properties for basic customization. This tool generates both sets of rules.
What does scrollbar-width do in Firefox?
The scrollbar-width CSS property lets you set the scrollbar to "auto" (default), "thin" (narrower) or "none" (hidden). Firefox does not support arbitrary pixel widths like Webkit browsers.
Can I hide the scrollbar entirely?
Yes. Set the width to the minimum and use a track color that matches your background. For true hiding, use ::-webkit-scrollbar { display: none } and scrollbar-width: none — but be cautious about accessibility.
Will the hover color work on mobile?
Mobile browsers typically use overlay scrollbars that auto-hide, so the hover state is rarely visible on touch devices. The styling is mainly useful for desktop browsers.
More CSS & Design
Color Picker
Pick colors visually and get HEX, RGB, and HSL values.
Open tool →Gradient Generator
Create CSS linear and radial gradients with a visual editor.
Open tool →Color Palette Generator
Generate harmonious color palettes from a base color.
Open tool →Text Shadow Generator
Create CSS text shadows with a visual editor and presets.
Open tool →Box Shadow Generator
Create CSS box shadows with a visual editor.
Open tool →Border Radius Generator
Create CSS border-radius with a visual corner editor.
Open tool →