Scrollbar Styler
Custom scrollbar CSS generator with track, thumb, width and hover state controls.
Controls
Scrollbar width — 10px
Corner radius — 8px
Track color
Thumb color
Thumb hover color
Live preview
Scroll this panel to see line 1 and your custom scrollbar in action.
Scroll this panel to see line 2 and your custom scrollbar in action.
Scroll this panel to see line 3 and your custom scrollbar in action.
Scroll this panel to see line 4 and your custom scrollbar in action.
Scroll this panel to see line 5 and your custom scrollbar in action.
Scroll this panel to see line 6 and your custom scrollbar in action.
Scroll this panel to see line 7 and your custom scrollbar in action.
Scroll this panel to see line 8 and your custom scrollbar in action.
Scroll this panel to see line 9 and your custom scrollbar in action.
Scroll this panel to see line 10 and your custom scrollbar in action.
Scroll this panel to see line 11 and your custom scrollbar in action.
Scroll this panel to see line 12 and your custom scrollbar in action.
Scroll this panel to see line 13 and your custom scrollbar in action.
Scroll this panel to see line 14 and your custom scrollbar in action.
Scroll this panel to see line 15 and your custom scrollbar in action.
Scroll this panel to see line 16 and your custom scrollbar in action.
Scroll this panel to see line 17 and your custom scrollbar in action.
Scroll this panel to see line 18 and your custom scrollbar in action.
Scroll this panel to see line 19 and your custom scrollbar in action.
Scroll this panel to see line 20 and your custom scrollbar in action.
Scroll this panel to see line 21 and your custom scrollbar in action.
Scroll this panel to see line 22 and your custom scrollbar in action.
Scroll this panel to see line 23 and your custom scrollbar in action.
Scroll this panel to see line 24 and your custom scrollbar in action.
Generated CSS
.custom-scroll {
scrollbar-width: thin;
scrollbar-color: #ec4899 #1e293b;
}
.custom-scroll::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.custom-scroll::-webkit-scrollbar-track {
background: #1e293b;
border-radius: 8px;
}
.custom-scroll::-webkit-scrollbar-thumb {
background: #ec4899;
border-radius: 8px;
}
.custom-scroll::-webkit-scrollbar-thumb:hover {
background: #f472b6;
}