CSS Scrollbar Styler — Free Online Tool

Design custom scrollbar styles for webkit browsers. CSS Scrollbar Styler is a free online tool from the ToolsRift CSS Generators collection. It runs entirely in your browser — nothing to install, no signup, and your data never leaves your device.

Loading CSS Scrollbar Styler…

How to use CSS Scrollbar Styler

Set the scrollbar width, track and thumb colors and radius, scroll the preview box to test, and copy the CSS.

Frequently asked questions

How do I style a scrollbar in CSS?

Use the ::-webkit-scrollbar pseudo-elements to set the width, track and thumb colors, and thumb border-radius.

Which browsers support this?

The ::-webkit-scrollbar syntax works in Chrome, Edge and Safari; Firefox uses scrollbar-width and scrollbar-color instead.

Can I round the scrollbar thumb?

Yes — apply border-radius to the ::-webkit-scrollbar-thumb for a rounded, pill-shaped handle.

More CSS Generators

CSS Variables Generator
Generate design token CSS custom property systems
CSS Loader Generator
Create pure CSS loading spinners and animated indicators
CSS Triangle Generator
Generate CSS border-trick triangles and arrows
CSS Color Palette Generator
Generate harmonious color palettes as CSS custom properties
PX to REM Converter
Convert px to rem and rem to px with adjustable root font size
CSS Specificity Calculator
Score any CSS selector

← View all CSS Generators