CSS Scrollbar Generator
Design custom WebKit and Firefox scrollbars visually. Adjust thickness, track grooves, thumb pill radius, and hover transitions in real-time.
📏 Track Groove Settings
👆 Thumb Handle & Hover States
Scroll Testing Canvas
Mode: bothScroll down vertically or pan horizontally to verify your customized scrollbar width (12px), track groove, and active hover transition physics.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris.
/* Works on Chrome, Edge, Safari & Opera */
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
::-webkit-scrollbar-track {
background: #131318;
border-radius: 8px;
}
::-webkit-scrollbar-thumb {
background-color: #f5c842;
border-radius: 8px;
border: 2px solid #131318;
}
::-webkit-scrollbar-thumb:hover {
background-color: #ffd700;
}
::-webkit-scrollbar-thumb:active {
background-color: #e5b832;
}
::-webkit-scrollbar-corner {
background: #131318;
}
/* Works on Firefox (W3C Standards) */
* {
scrollbar-width: auto;
scrollbar-color: #f5c842 #131318;
}Mastering Custom CSS Scrollbars & Cross-Browser Styling
WebKit vs. Firefox W3C Standards
Default browser scrollbars often clash with dark mode themes and modern glassmorphic designs. UtilVox generates both WebKit pseudo-element rules (Chrome, Safari, Edge, Opera) and W3C CSS scrollbar standards (Firefox) for seamless cross-browser compatibility.
| CSS Rule | Browser Support | Purpose |
|---|---|---|
| ::-webkit-scrollbar | Chrome, Safari, Edge | Controls overall scrollbar width/height |
| ::-webkit-scrollbar-track | Chrome, Safari, Edge | Background groove of the scrollbar |
| ::-webkit-scrollbar-thumb | Chrome, Safari, Edge | Draggable scroll pill handle with hover states |
| scrollbar-width | Firefox, W3C Standard | Sets thin or auto scrollbar thickness |
| scrollbar-color | Firefox, W3C Standard | Sets thumb and track colors in a single rule |
Pairing Scrollbars with Other CSS Tools
Enhance your UI forms with our CSS input styler, build data layouts with our CSS table generator, or customize tooltips with our CSS tooltip generator.