Scrollbar Styler

About Scrollbar styler

Choose scrollbar width, colors and corner radii, then preview them on a scrolling list. The generated CSS targets the WebKit pseudo-elements used by Chrome, Edge and Safari and adds the standard scrollbar-color and scrollbar-width lines Firefox reads. Use it to bring page scrollbars in line with a dark or branded theme.

How to use it

1. Set Width between 2 and 20 pixels.
2. Set Thumb radius and Track radius from 0 to 10 pixels.
3. Choose the Track color, the Thumb color and the Thumb hover color.
4. Scroll the sample list to see the result, and hover the thumb to check the hover shade.
5. Copy everything under Generated CSS and paste it into your stylesheet.

Thin scrollbar for Firefox

Width 4, thumb #94a3b8, track #f1f5f9

@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 #f1f5f9;
  }
}

When to use it

• Matching scrollbars to a dark dashboard where the default light bar looks out of place.
• Slimming down the scrollbar in a chat panel or code block.
• Making a bright thumb visible against a dark sidebar for accessibility.
• Giving a branded app a consistent scrollbar across Chrome, Safari and Firefox.

Questions about Scrollbar styler

Why do width and radius not affect Firefox?

Firefox only understands scrollbar-width, which is either thin or auto here, and scrollbar-color for thumb and track. The tool writes thin when the width is 4 pixels or less, otherwise auto, inside a block that only browsers without the WebKit pseudo-elements read.

Will Chrome use my radius and hover color?

Yes. Chrome 121 and later skip every ::-webkit-scrollbar rule when scrollbar-color or scrollbar-width applies, so the generated CSS wraps those two standard properties in an at-supports not selector block. Chrome, Edge and Safari then use the WebKit rules, and Firefox uses the standard ones.

Does the CSS apply to the whole page?

The selectors are unscoped, so they style every scrollable element. Prefix them with a class name or a container selector if you want only one panel to change.

Does the preview show the Firefox styles?

No. The preview is drawn with the WebKit pseudo-elements only, so open your page in Firefox to check that side.

Related tools

• Gradient generatorBuild CSS linear, radial, and conic gradients with custom stops, angles, and live preview
• CSS shadow generatorCraft box-shadow and text-shadow CSS with multi-layer support, presets, and live preview
• Glassmorphism generatorCreate frosted-glass effects with backdrop blur, transparency, and border controls — live preview included
• Neumorphism generatorBuild soft-UI neumorphic elements with dual box-shadows derived from a single base color
• CSS filter generatorCombine blur, brightness, contrast, hue-rotate, saturate, sepia and more with a live image preview
• CSS transform generatorVisually combine translate, rotate, scale, and skew transforms with a live preview element