BYTETOOLS

CSS Scrollbar Generator

Style scrollbars with both syntaxes at once: scrollbar-width and scrollbar-color for Firefox, plus the ::-webkit-scrollbar block for Chrome, Edge and Safari.

Live preview

Line 1 — scroll this panel vertically and horizontally to see the styled scrollbars. The rules below are scoped to this box so they cannot affect the rest of the page.

Line 2 — scroll this panel vertically and horizontally to see the styled scrollbars. The rules below are scoped to this box so they cannot affect the rest of the page.

Line 3 — scroll this panel vertically and horizontally to see the styled scrollbars. The rules below are scoped to this box so they cannot affect the rest of the page.

Line 4 — scroll this panel vertically and horizontally to see the styled scrollbars. The rules below are scoped to this box so they cannot affect the rest of the page.

Line 5 — scroll this panel vertically and horizontally to see the styled scrollbars. The rules below are scoped to this box so they cannot affect the rest of the page.

Line 6 — scroll this panel vertically and horizontally to see the styled scrollbars. The rules below are scoped to this box so they cannot affect the rest of the page.

Line 7 — scroll this panel vertically and horizontally to see the styled scrollbars. The rules below are scoped to this box so they cannot affect the rest of the page.

Line 8 — scroll this panel vertically and horizontally to see the styled scrollbars. The rules below are scoped to this box so they cannot affect the rest of the page.

Line 9 — scroll this panel vertically and horizontally to see the styled scrollbars. The rules below are scoped to this box so they cannot affect the rest of the page.

Line 10 — scroll this panel vertically and horizontally to see the styled scrollbars. The rules below are scoped to this box so they cannot affect the rest of the page.

Line 11 — scroll this panel vertically and horizontally to see the styled scrollbars. The rules below are scoped to this box so they cannot affect the rest of the page.

Line 12 — scroll this panel vertically and horizontally to see the styled scrollbars. The rules below are scoped to this box so they cannot affect the rest of the page.

Line 13 — scroll this panel vertically and horizontally to see the styled scrollbars. The rules below are scoped to this box so they cannot affect the rest of the page.

Line 14 — scroll this panel vertically and horizontally to see the styled scrollbars. The rules below are scoped to this box so they cannot affect the rest of the page.

Line 15 — scroll this panel vertically and horizontally to see the styled scrollbars. The rules below are scoped to this box so they cannot affect the rest of the page.

Line 16 — scroll this panel vertically and horizontally to see the styled scrollbars. The rules below are scoped to this box so they cannot affect the rest of the page.

On macOS, overlay scrollbars stay hidden until you scroll. Set “Show scroll bars: Always” in System Settings to see the full styling.

Scrollbar settings

Track
Thumb
12
8
0
-10

CSS

/* Standard syntax — Firefox, and Chrome 121+ */
* {
  scrollbar-width: thin;
  scrollbar-color: #7c3aed #f1f5f9;
}

/* WebKit syntax — Chrome, Edge, Safari */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

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

::-webkit-scrollbar-thumb {
  background: #7c3aed;
  border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
  background: #5f14e0;
}

::-webkit-scrollbar-corner {
  background: #f1f5f9;
}

Both syntaxes are included on purpose. Firefox has only ever supported the standardscrollbar-width/scrollbar-colorpair, while older Chrome, Edge and Safari need the ::-webkit-scrollbarpseudo-elements. Chrome 121 and later understand both — and when it does, the standard properties win, which is why the WebKit block sits second. Avoid scrollbar-width: none on primary content: hiding the bar removes an important affordance for mouse users.

What is the CSS Scrollbar Generator?

Custom scrollbars are one of the few places in CSS where you genuinely need two different syntaxes. Firefox has only ever supported the standard scrollbar-width and scrollbar-color properties, while Chrome, Edge and Safari grew up with the ::-webkit-scrollbar pseudo-elements.

  • Emits the standard and WebKit syntaxes together
  • Live scrolling preview scoped so it cannot leak onto the page
  • Hover colour derived automatically from the thumb
  • Optional thumb margin using border plus background-clip
  • Scope to every element or to one selector
  • Includes the scrollbar-corner rule where the two bars meet

How to use the CSS Scrollbar Generator

  1. 1

    Pick the track and thumb colours with the swatches or by typing hex values.

  2. 2

    Set the width, corner radius, thumb margin and hover lightness shift.

  3. 3

    Choose scrollbar-width, and whether to target everything or one selector.

  4. 4

    Scroll the preview panel to see the styled bars in both directions.

  5. 5

    Copy the CSS — it contains both syntaxes and needs no extra work.

About the CSS Scrollbar Generator

Custom scrollbars are one of the few places in CSS where you genuinely need two different syntaxes. Firefox has only ever supported the standard scrollbar-width and scrollbar-color properties, while Chrome, Edge and Safari grew up with the ::-webkit-scrollbar pseudo-elements. This generator writes both, in the right order, from one set of controls.

Set the track and thumb colours, the width, the corner radius and an optional inset margin, and a live panel on the page shows you the result immediately. The hover state is derived from your thumb colour by shifting its HSL lightness, so it stays in the same family. You can target every scrollable element on the page or scope the rules to a single selector.

All of it is generated locally in your browser — nothing is uploaded and there is no account to create.

Frequently asked questions

How do I change the scrollbar colour in CSS?

Use scrollbar-color with two values, the thumb first and the track second, for the standard syntax. For older Chrome, Edge and Safari you also need ::-webkit-scrollbar-track and ::-webkit-scrollbar-thumb with a background each. This tool writes both blocks for you.

Does scrollbar styling work in Firefox?

Yes, through scrollbar-width and scrollbar-color, which Firefox has supported for years. What Firefox does not support is the ::-webkit-scrollbar pseudo-elements, so you cannot give it a custom radius or a hover colour there. Keep your design working with just a track and thumb colour.

Why can I not see my custom scrollbar on a Mac?

macOS uses overlay scrollbars that stay hidden until you actually scroll, so most of the time there is nothing to style. Open System Settings, go to Appearance and set Show scroll bars to Always, and your styling will appear.

Should I hide the scrollbar completely?

Rarely. Setting scrollbar-width to none keeps the area scrollable but removes the only visual signal that there is more content, which is a real usability loss for mouse users. It is reasonable inside a small carousel or chip row, but not on primary content.

Why does the generated CSS contain both syntaxes?

Because no single syntax covers every browser. Chrome 121 and later understand both, and when they do the standard properties take priority, which is why the WebKit block is written second. Older versions ignore the standard pair and use the WebKit rules instead.

Related tools