CSS Scrollbar Generator
Style custom scrollbars and copy the cross-browser CSS.
Scrollable content line 1
Scrollable content line 2
Scrollable content line 3
Scrollable content line 4
Scrollable content line 5
Scrollable content line 6
Scrollable content line 7
Scrollable content line 8
Scrollable content line 9
Scrollable content line 10
Scrollable content line 11
Scrollable content line 12
Scrollable content line 13
Scrollable content line 14
Scrollable content line 15
Scrollable content line 16
Scrollable content line 17
Scrollable content line 18
Scrollable content line 19
Scrollable content line 20
Scrollable content line 21
Scrollable content line 22
Scrollable content line 23
Scrollable content line 24
Scrollable content line 25
Scrollable content line 26
Scrollable content line 27
Scrollable content line 28
Scrollable content line 29
Scrollable content line 30
/* Chrome, Edge, Safari */
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
::-webkit-scrollbar-track {
background: #e5e7eb;
}
::-webkit-scrollbar-thumb {
background: #6366f1;
border-radius: 8px;
}
/* Firefox */
* {
scrollbar-width: auto;
scrollbar-color: #6366f1 #e5e7eb;
}Cross-browser scrollbar styling
Custom scrollbars use two different syntaxes. Chromium and Safari use the ::-webkit-scrollbar pseudo-elements for fine control over width, track, and thumb, while Firefox uses the standardized scrollbar-width and scrollbar-color properties. The generated CSS includes both so your scrollbar looks consistent everywhere. Scroll the preview to see it live — it all runs in your browser.