CSS Scrollbar Styler

Customize your scrollbar and copy ready-to-use CSS for WebKit and Firefox.

Controls

<div class="sb-control">
  <label>Scrollbar Width Mode</label>
  <select class="sb-select" id="sb-width-mode" onchange="sbWidthModeChange()">
    <option value="auto">auto (default)</option>
    <option value="thin">thin</option>
    <option value="custom" selected>custom (px)</option>
  </select>
</div>

<div class="sb-control" id="sb-custom-width-wrap">
  <label>Custom Width: <span class="sb-val" id="sb-width-val">10px</span></label>
  <input type="range" id="sb-width" min="2" max="32" value="10" oninput="sbUpdate()">
</div>

<div class="sb-control">
  <label>Track Color</label>
  <div class="sb-color-row">
    <input type="color" id="sb-track-color" value="#f1f5f9" oninput="sbSyncColor('sb-track-color','sb-track-color-hex')">
    <input type="text" id="sb-track-color-hex" value="#f1f5f9" oninput="sbSyncHex('sb-track-color','sb-track-color-hex')" maxlength="9">
  </div>
</div>

<div class="sb-control">
  <label>Thumb Color</label>
  <div class="sb-color-row">
    <input type="color" id="sb-thumb-color" value="#94a3b8" oninput="sbSyncColor('sb-thumb-color','sb-thumb-color-hex')">
    <input type="text" id="sb-thumb-color-hex" value="#94a3b8" oninput="sbSyncHex('sb-thumb-color','sb-thumb-color-hex')" maxlength="9">
  </div>
</div>

<div class="sb-control">
  <label>Thumb Hover Color</label>
  <div class="sb-color-row">
    <input type="color" id="sb-thumb-hover-color" value="#6366f1" oninput="sbSyncColor('sb-thumb-hover-color','sb-thumb-hover-hex')">
    <input type="text" id="sb-thumb-hover-hex" value="#6366f1" oninput="sbSyncHex('sb-thumb-hover-color','sb-thumb-hover-hex')" maxlength="9">
  </div>
</div>

<div class="sb-control">
  <label>Thumb Border-Radius: <span class="sb-val" id="sb-thumb-radius-val">6px</span></label>
  <input type="range" id="sb-thumb-radius" min="0" max="50" value="6" oninput="sbUpdate()">
</div>

<div class="sb-control">
  <label>Track Border-Radius: <span class="sb-val" id="sb-track-radius-val">0px</span></label>
  <input type="range" id="sb-track-radius" min="0" max="50" value="0" oninput="sbUpdate()">
</div>

Live Preview

Scroll me to see your custom scrollbar in action. This preview box contains enough content to make scrolling necessary so you can see exactly how your scrollbar looks.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

Customize width, colors, and border-radius with the controls on the left. Your changes update the preview in real time.

Copy the generated CSS for WebKit (Chrome, Safari, Edge) or Firefox using the tabs below.

Use presets for quick starting points — then fine-tune to match your design system.

Try the "Hidden" preset to remove scrollbars while keeping scroll functionality.

Preview reflects your current settings.

Apply to element (CSS selector): Leave body for global styles.

WebKit (Chrome/Safari/Edge)

Firefox

Combined

Browser Compatibility

Property	Chrome	Firefox	Safari	Edge
`::-webkit-scrollbar`	Yes	No	Yes	Yes
`scrollbar-width`	121+	Yes	16+	121+
`scrollbar-color`	121+	Yes	16+	121+
Hover effects	Yes (WebKit)	Not supported	Yes (WebKit)	Yes (WebKit)

Tip: Use the Combined output to support all modern browsers. Firefox does not support per-element scrollbar hover colors.

Style buttons → CSS Button Generator

Customize animations → CSS Animation Generator

CSS variables → CSS Variables Generator