Scroll this box â the scrollbar on the right uses the exact styling you are editing above. Drag the thumb or use the wheel to see your track colour, thumb colour and corner radius in action.
Custom scrollbars are rendered by the browser, so the live preview here is a real scrollbar, not a simulation. What you see is what the copied CSS produces in Chrome, Edge and Safari.
Keep enough contrast between the thumb and the track. A thumb that is too close in colour to the track is hard to grab, especially on touchpads and smaller screens.
Raising the corner radius rounds the ends of the thumb. Adding track padding insets the thumb from the edges for a lighter, floating look.
Firefox uses the standard scrollbar-width and scrollbar-color properties, which give a thinner, simpler scrollbar without pixel-level control or rounded corners.
When you are happy with the result, press Copy CSS to grab both blocks, or Copy link to share a URL that reopens this exact scrollbar.