CSSGen.app

Scrollbar Generator

Style custom scrollbars for Webkit browsers (Chrome, Safari, Edge) and Firefox using modern CSS scrollbar specifications.

Scrollbar Width8px
Border Radius4px
Track Background
Thumb Color
Thumb Hover Color
Mock Container Preview
/* Webkit browsers (Chrome, Safari, Opera) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

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

::-webkit-scrollbar-thumb {
  background: #2563eb;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #1d4ed8;
}

/* Firefox fallback */
* {
  scrollbar-width: thin;
  scrollbar-color: #2563eb #f1f5f9;
}

What is a Scrollbar Customization in CSS?

Scrollbar customization properties allow you to style scroll track backgrounds, thumb widths, and hover colors.

Why Use a CSS Scrollbar Customization?

Standard browser scrollbars can look generic or disrupt custom dark modes. Clean, styled scrollbars match the theme of premium SaaS tools.

CSS Syntax & Controls

Use webkit prefix pseudoclasses (::-webkit-scrollbar, ::-webkit-scrollbar-thumb) combined with standard Firefox properties.

::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-thumb { background: #2563eb; }

Best Practices

  • Keep scrollbars visible: do not hide them entirely, as it hurts accessibility.
  • Always include dark/light theme fallbacks.

Common Mistakes

  • Making scrollbars too narrow to click, ruining touch and cursor navigation.

Step-by-Step Guide: How to Use this Generator

  1. Set scrollbar width and border-radius.
  2. Pick track background colors and thumb fills.
  3. Test by scrolling the preview box, then copy the styles.

Browser Compatibility

ChromeSafariFirefoxEdge
Yes (Webkit)Yes (Webkit)Yes (Fallback standard)Yes (Webkit)

Frequently Asked Questions (FAQ)

Does Firefox support webkit scrollbar styling?

No, Firefox uses the standard scrollbar-color and scrollbar-width properties. We generate both versions for maximum compatibility.