CSS Scrollbar Generator

A CSS scrollbar generator for Chromium, Safari and Firefox

Browsers expose two different ways to style scrollbars, and this CSS scrollbar generator writes both, arranged so each browser uses the one that suits it best. The standard properties scrollbar-color and scrollbar-width are supported by Firefox and by Chrome and Edge from version 121. The non-standard ::-webkit-scrollbar pseudo-elements are supported by Chrome, Edge, Opera and Safari and allow more detail: exact width, rounded thumbs, hover colors and an inset.

Example output

With the default settings and a class of sidebar with an 8px width:

/* Standard properties (Firefox). Wrapped in @supports because Chromium 121+ ignores
   ::-webkit-scrollbar styles as soon as scrollbar-color/scrollbar-width are set. */
@supports not selector(::-webkit-scrollbar) {
  .sidebar {
    scrollbar-width: thin;
    scrollbar-color: #0f766e #f1f5f9;
  }
}

/* Chrome, Edge, Safari */
.sidebar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.sidebar::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 8px;
}

.sidebar::-webkit-scrollbar-thumb {
  background-color: #0f766e;
  border-radius: 8px;
  border: 2px solid #f1f5f9;
}

.sidebar::-webkit-scrollbar-thumb:hover {
  background-color: #115e59;
}

With the class field empty the standard properties go on * inside the same @supports block, and the pseudo-elements are written without a selector, so every scrollable element and the page itself are styled.

Options explained

• Width (2–24px) – sets both width (vertical bar) and height (horizontal bar). The standard scrollbar-width only accepts keywords, so the tool writes thin for 8px or less and auto above that.
• Track, Thumb and Thumb hover colours – scrollbar-color takes the thumb first, then the track.
• Radius – rounds both track and thumb.
• Thumb inset – a border in the track color around the thumb, which makes it look like it floats inside the track.

Standard vs -webkit- scrollbars

Since Chrome and Edge 121, if an element has scrollbar-color or scrollbar-width set, those standard properties win and the ::-webkit-scrollbar rules are ignored for it. You would get your colors but lose the custom width, rounded thumb and inset. That is why the generated CSS puts the standard properties inside @supports not selector(::-webkit-scrollbar): Chrome, Edge, Opera and Safari support the pseudo-elements, skip the block and use the detailed ::-webkit-scrollbar rules, while Firefox, which has no pseudo-element support, applies the standard properties. Keep the two parts together when you paste them; removing the @supports wrapper brings the Chromium conflict back.

Tips

• Keep it usable. Very thin bars and low-contrast thumbs are hard to grab and see. Keep a clear difference between thumb and track.
• Overlay scrollbars change. On macOS, styling ::-webkit-scrollbar replaces the auto-hiding overlay scrollbar with a permanently visible one.
• Layout shift. Add scrollbar-gutter: stable to reserve space so content does not jump when a scrollbar appears.
• Class names are sanitized. Spaces and symbols become hyphens, so type a plain class name.

To convert the width to rem, use the px to rem converter; to pick matching colors, try the color palette generator.

Privacy

The CSS is generated in your browser. No settings are sent anywhere.