utilities
Flexbox Froggy
Learn CSS Flexbox through 24 interactive coding puzzles with frogs.
#flexbox#learning#interactive
Built-in toolFree · No signup
CSS Scrollbar Styler
Design custom scrollbars with live preview. Set width, track and thumb colours, border radius, hover colours, and border. Generates both webkit pseudo-element CSS and the Firefox scrollbar-color shorthand.
Live Preview
The quick brown fox jumps over the lazy dog. Sphinx of black quartz, judge my vow. Pack my box with five dozen liquor jugs. How vexingly quick daft zebras jump. The five boxing wizards jump quickly. Waltz, bad nymph, for quick jigs vex. Mr Jock, TV quiz PhD, bags few lynx. Sympathizing would fix Quaker objectives. A wizard's job is to vex chumps quickly in fog. Bright vixens jump; dozy fowl quack.
The quick brown fox jumps over the lazy dog. Sphinx of black quartz, judge my vow. Pack my box with five dozen liquor jugs. How vexingly quick daft zebras jump. The five boxing wizards jump quickly. Waltz, bad nymph, for quick jigs vex. Mr Jock, TV quiz PhD, bags few lynx. Sympathizing would fix Quaker objectives. A wizard's job is to vex chumps quickly in fog. Bright vixens jump; dozy fowl quack.
The quick brown fox jumps over the lazy dog. Sphinx of black quartz, judge my vow. Pack my box with five dozen liquor jugs. How vexingly quick daft zebras jump. The five boxing wizards jump quickly. Waltz, bad nymph, for quick jigs vex. Mr Jock, TV quiz PhD, bags few lynx. Sympathizing would fix Quaker objectives. A wizard's job is to vex chumps quickly in fog. Bright vixens jump; dozy fowl quack.
The quick brown fox jumps over the lazy dog. Sphinx of black quartz, judge my vow. Pack my box with five dozen liquor jugs. How vexingly quick daft zebras jump. The five boxing wizards jump quickly. Waltz, bad nymph, for quick jigs vex. Mr Jock, TV quiz PhD, bags few lynx. Sympathizing would fix Quaker objectives. A wizard's job is to vex chumps quickly in fog. Bright vixens jump; dozy fowl quack.
The quick brown fox jumps over the lazy dog. Sphinx of black quartz, judge my vow. Pack my box with five dozen liquor jugs. How vexingly quick daft zebras jump. The five boxing wizards jump quickly. Waltz, bad nymph, for quick jigs vex. Mr Jock, TV quiz PhD, bags few lynx. Sympathizing would fix Quaker objectives. A wizard's job is to vex chumps quickly in fog. Bright vixens jump; dozy fowl quack.
The quick brown fox jumps over the lazy dog. Sphinx of black quartz, judge my vow. Pack my box with five dozen liquor jugs. How vexingly quick daft zebras jump. The five boxing wizards jump quickly. Waltz, bad nymph, for quick jigs vex. Mr Jock, TV quiz PhD, bags few lynx. Sympathizing would fix Quaker objectives. A wizard's job is to vex chumps quickly in fog. Bright vixens jump; dozy fowl quack.
8px
Track color
4px
Thumb color
Thumb hover color
4px
2px
Thumb border color
How to use
01
Set width
Thin scrollbars (6–10px) look great on most UIs. Wider bars suit dashboards with heavy scrolling.
02
Style the track
Match your track colour to the page background. A subtle border-radius softens the edges.
03
Customise the thumb
Pick a thumb colour and hover colour. A border that matches the track creates a floating pill effect.
04
Copy CSS
Copy CSS includes both ::-webkit-scrollbar rules and the Firefox scrollbar-color property.
More CSS utility tools
From our directory of 30+ CSS tools.
Know a great CSS tool?
Submit it to the directory and help developers discover it.