CSS Scrollbar Generator

Design a custom scrollbar and copy cross-browser CSS — thickness, radii, hover and pressed colours, borders, shadow. WebKit and Firefox, free, no upload.

Thickness: 14px

Set thickness to 0 for a hidden scrollbar that still scrolls.

Corner radius: 8px Track and thumb corners differ

Track#f1f1f1

Thumb#6b7280

Thumb (hover)#4b5563

Hover and pressed colours for the track and the thumbTrack border: 0pxThumb border: 0pxMinimum thumb length: 0px

0 lets the handle shrink as far as the page is long.

Shadow blur: 0pxApplies to

Leave this blank to restyle every scrollbar on the page, or name one element — .chat, main — to restyle only its own bar.

Include the browser comments

Live preview — scroll inside either box

On a light background

Scroll this box to see your custom scrollbar in action. Both the vertical and horizontal bars are styled with the colours, thickness and radius you pick above.

On a dark background

Scroll this box to see your custom scrollbar in action. Both the vertical and horizontal bars are styled with the colours, thickness and radius you pick above.

/* Chrome, Edge, and Safari */
::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 8px;
}
::-webkit-scrollbar-thumb {
  background: #6b7280;
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
  background: #4b5563;
}

/* Firefox */
@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: auto;
    scrollbar-color: #6b7280 #f1f1f1;
  }
}

🔒 Runs in your browser — nothing is uploaded.

Style scrollbars in every browser

Default scrollbars look different on every operating system, and a heavy grey bar can clash with a carefully designed interface. This generator lets you set the exact thickness, a corner radius for the track and the thumb together or apart, the track and thumb colours with their hover and pressed states, a border on either part, a floor under the thumb's length and a shadow, then copies ready-to-paste CSS. It writes the WebKit ::-webkit-scrollbar pseudo-elements for Chrome, Edge and Safari and the standard scrollbar-width and scrollbar-color declarations for Firefox, so your bar looks consistent across engines.

Live preview and copy-paste output

Two preview boxes with forced overflow — one on a light background, one on a dark one — show the vertical and horizontal bars updating as you drag the sliders and pick colours, so you can judge the contrast on both grounds before touching your codebase. The output is plain CSS with no build step and no library: leave the "Applies to" field blank and it restyles every scrollbar on the page, or name an element — .chat, main — and the block you copy is scoped to that one panel. The browser comments can be switched off, and the whole design travels in the page's own link. Setting the thickness to 0 gives you a hidden scrollbar that still scrolls, a common trick for carousels and custom UIs.

Frequently asked questions

How do I style the scrollbar in Chrome and Safari?

Use the ::-webkit-scrollbar pseudo-elements. This tool generates ::-webkit-scrollbar for the thickness plus ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb and ::-webkit-scrollbar-thumb:hover with your colours and radius, and adds :hover and :active rules for the track and the thumb when you set those colours. Paste them into your CSS and the bar restyles instantly in Chrome, Edge and Safari.

Can I put a border on the thumb, or inset it from the track?

Both, but not at once: they are the same control. Give the thumb a border width, then either pick its colour or tick "Make it transparent". A scrollbar part has only one border box, so a transparent border with background-clip: content-box is what insets the handle from the groove — the padding that CSS has no property for on a scrollbar.

Does this work in Firefox?

Yes. Firefox does not support ::-webkit-scrollbar, so the tool also emits the standard scrollbar-width and scrollbar-color properties that Firefox uses for the bar width and its thumb and track colours. Both blocks are copied together for full cross-browser coverage.

How do I make a thin or hidden scrollbar?

Lower the thickness slider for a slimmer bar; Firefox maps small values to scrollbar-width: thin automatically. Set the thickness to 0 for a scrollbar that is invisible but still scrollable, rendered as width and height 0 for WebKit and scrollbar-width: none for Firefox.

Is anything uploaded?

No. The CSS is generated entirely in your browser and nothing is sent to a server, so there is no sign-up and no upload.