Custom CSS Scrollbar Generator

Customize a CSS scrollbar (width, colors, radius) and get the code.

Demo line 1

Demo line 2

Demo line 3

Demo line 4

Demo line 5

Demo line 6

Demo line 7

Demo line 8

Demo line 9

Demo line 10

Demo line 11

Demo line 12

Demo line 13

Demo line 14

Demo line 15

Demo line 16

Demo line 17

Demo line 18

Demo line 19

Demo line 20

WidthTrackThumbRadius

▸CSS

/* Chrome, Edge, Safari */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0d1219; }
::-webkit-scrollbar-thumb { background: #39d353; border-radius: 8px; }
/* Firefox */
* { scrollbar-width: thin; scrollbar-color: #39d353 #0d1219; }

🔒 100% client-side — no data sent

Design a custom CSS scrollbar (colors, width, radius) and copy cross-browser code. A preview shows the result instantly. Everything is generated locally in your browser, with no data sent anywhere.

What is it for?

▸ Match the scrollbar to your site's branding
▸ Style a scrollable content area
▸ Generate webkit and standard code in one click
▸ Test different colors before integrating

FAQ

Is the code cross-browser?

It includes webkit properties and standards for broad compatibility.

Can I set width and colors?

Yes, adjust width, track and thumb colors, and radius.

Are my settings sent to a server?

No, everything is computed in your browser.