Loading…

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
CSS Pattern Generator
Create pure-CSS background patterns from gradients, no images
Cubic Bezier Editor
Build cubic-bezier easing curves with a live animated preview
CSS Text Stroke Generator
Add outlined text with -webkit-text-stroke and live preview
CSS Outline Generator
Generate outline width, style, color and offset with preview
CSS Backdrop Filter Generator
Build backdrop-filter blur, brightness and saturation effects
CSS Blend Mode Generator
Preview all mix-blend-mode values on overlapping shapes

← View all CSS GeneratorsBrowse all 1,100+ tools →