Super Boring Tools

Search tools

Find a tool by name or what it does.

CSS Scrollbar Generator

Design a custom scrollbar and copy cross-browser CSS.

Preview

Line 1 of scrollable content

Line 2 of scrollable content

Line 3 of scrollable content

Line 4 of scrollable content

Line 5 of scrollable content

Line 6 of scrollable content

Line 7 of scrollable content

Line 8 of scrollable content

Line 9 of scrollable content

Line 10 of scrollable content

Line 11 of scrollable content

Line 12 of scrollable content

Line 13 of scrollable content

Line 14 of scrollable content

Line 15 of scrollable content

Line 16 of scrollable content

Line 17 of scrollable content

Line 18 of scrollable content

Line 19 of scrollable content

Line 20 of scrollable content

Line 21 of scrollable content

Line 22 of scrollable content

Line 23 of scrollable content

Line 24 of scrollable content

Scroll the panel above to see the track, thumb, and hover color in action.

Colors
Thickness
CSS
.scroll-panel {
  scrollbar-width: auto;
  scrollbar-color: #9ca3af #e5e7eb;
}

.scroll-panel::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

.scroll-panel::-webkit-scrollbar-track {
  background: #e5e7eb;
  border-radius: 6px;
}

.scroll-panel::-webkit-scrollbar-thumb {
  background: #9ca3af;
  border-radius: 6px;
}
.scroll-panel::-webkit-scrollbar-thumb:hover {
  background: #6b7280;
}

How to make a custom CSS scrollbar

  1. Pick colors

    Choose a track color and thumb color, then set an optional hover color for the thumb.

  2. Set width and radius

    Drag the width and corner radius sliders while the preview scrolls to match your layout.

  3. Choose thickness

    Switch between a thin scrollbar and the default auto thickness to suit the surface.

  4. Copy the CSS

    Copy the generated rules and paste them onto the scrollable element in your stylesheet.

Why use this tool

Live scrollable preview

A real overflowing panel shows your scrollbar exactly as it will render, updating as you adjust it.

Cross-browser output

Output includes the classic track and thumb rules plus the standard scrollbar-width and scrollbar-color properties.

Hover thumb color

Set a separate color for when the pointer is over the thumb so the scrollbar reacts to interaction.

Thin or auto thickness

Toggle between a slim scrollbar and the default thickness, mapped to both styling approaches at once.

Private by design

Everything runs in your browser. Nothing you type is uploaded or stored anywhere.

Free and unlimited

Generate as many scrollbar styles as you like with no account and no limits.

About this tool

The CSS Scrollbar Generator lets you design a scrollbar visually and copy rules you can drop straight into a stylesheet. Pick a track color for the groove the thumb slides in, a thumb color for the draggable handle, and an optional hover color so the thumb changes as the pointer passes over it. Sliders control the scrollbar width and the corner radius of the thumb, and a thickness toggle switches between a thin bar and the default size.

The preview is a genuinely overflowing panel, so what you see scrolling is what the browser will paint. That removes the guesswork of editing raw values and reloading a page to check the result.

The generated CSS covers two approaches at once. The track and thumb rules give fine control over color, size, and radius on the engines that support them, while the standard scrollbar-width and scrollbar-color properties cover the browsers that use the simpler model. Applying both means your scrollbar looks intentional across a wide range of browsers, with a graceful fallback where deep styling is not available.

A few surfaces, including some on macOS and mobile, use overlay scrollbars that appear only while scrolling and ignore width styling. In those cases the color still applies but the fixed thickness may not, which is expected behavior rather than a bug. If you also want to restyle form controls, try the CSS button generator or explore the glassmorphism generator for matching panels.

Frequently asked questions

How do I use the generated scrollbar CSS?
Paste the rules into your stylesheet and scope them to the scrollable element, for example a class like .panel. The rules target that element and its scrollbar parts, so any element with overflow will pick up the style.
Why are there two sets of properties in the output?
Browsers use two different models for scrollbar styling. The track and thumb rules give detailed control where supported, and the scrollbar-width and scrollbar-color properties cover the rest. Including both gives the widest coverage.
Does this work in Safari?
Safari supports the track and thumb rules for color, width, and radius, so your styled scrollbar appears there. On surfaces that use overlay scrollbars the bar only shows while scrolling and keeps a fixed thickness.
Why does my scrollbar width look ignored?
Some systems and mobile browsers use overlay scrollbars that float over content and ignore width. The color usually still applies, but the thickness stays fixed. This is a platform choice, not an error in the CSS.
Is anything I enter uploaded?
No. The preview and CSS are generated entirely in your browser. Nothing you type is sent to a server, stored, or shared.

Related tools