Skip to tool

Custom Scrollbar Generator

Custom Scrollbar Generator tool on AzWebTools.

Result

Fill inputs and click run.

How to Use This Tool

  1. Locate the dimension controls and specify your desired scrollbar width (e.g., 8px for slim, 16px for standard).
  2. Open the color picker to select a color for the scrollbar track (the stationary background).
  3. Open the color picker to select a color for the scrollbar thumb (the moving handle).
  4. Adjust the border-radius slider to set how round or square you want the thumb to be.
  5. Preview the scrollbar design in the mock design area.
  6. Copy the generated CSS code snippet and paste it into your project's stylesheet.

Learn More About Custom Scrollbar Generator

Understanding Webkit Scrollbar CSS

Customizing scrollbars on the web relies heavily on Webkit pseudo-elements. While not part of the official W3C CSS specification, these vendor-prefixed selectors are widely supported by major browsers like Google Chrome, Microsoft Edge, Safari, and Opera.

Key Pseudo-Elements

To build a custom scrollbar, developers use a combination of these CSS selectors:

  • `::-webkit-scrollbar`: The background of the scrollbar itself. This is where you set the overall dimensions (width for vertical scrollbars, height for horizontal ones).
  • `::-webkit-scrollbar-track`: The track (or gutter) that the scrollbar sits in. You can style its background color, borders, and shadows.
  • `::-webkit-scrollbar-thumb`: The draggable scrolling handle. This is typically styled with a solid color or gradient, and often includes a border-radius to make it rounded.
  • `::-webkit-scrollbar-hover`: (Optional) Used to change the appearance of the thumb when a user hovers over it.

Browser Compatibility

It is important to note that -webkit- pseudo-elements only work in Webkit and Blink-based browsers. Firefox uses a different, standardized approach via the scrollbar-width and scrollbar-color CSS properties. For complete cross-browser compatibility, it is best practice to include both standards in your CSS.

Accessibility Best Practices

When designing custom scrollbars, always ensure sufficient contrast between the scrollbar thumb and the track. If the thumb blends too much into the background, users with visual impairments may struggle to locate and interact with the scrollbar. Avoid extremely thin scrollbars (under 6px), as they can be difficult to click and drag.

The Origin of Webkit Scrollbar Styling

Customizing browser scrollbars natively via CSS was introduced by the Webkit engine, powering early versions of Apple's Safari and later Google Chrome. By introducing proprietary pseudo-elements like ::-webkit-scrollbar, Webkit gave designers granular control over an interface element that was previously unstylable without heavy JavaScript and DOM manipulation. Although not an official W3C standard, these features became heavily utilized across the web for building branded user interfaces.

Webkit pseudo-elements revolutionized UI design by allowing developers to easily style browser scrollbars natively via CSS.
Primary Pseudo-element
::-webkit-scrollbar
Supported Engines
Webkit, Blink

Examples

Default Mac-like

Runtime-verified example for custom-scrollbar-generator
Input
{"width":"8","trackColor":"#f1f1f1","thumbColor":"#c1c1c1","thumbHoverColor":"#a8a8a8","borderRadius":"4"}
Output
{
  "width": "8",
  "trackColor": "#f1f1f1",
  "thumbColor": "#c1c1c1",
  "thumbHoverColor": "#a8a8a8",
  "borderRadius": "4"
}

Dark Mode Minimal

Runtime-verified example for custom-scrollbar-generator
Input
{"width":"10","trackColor":"#222222","thumbColor":"#444444","thumbHoverColor":"#666666","borderRadius":"0"}
Output
{
  "width": "10",
  "trackColor": "#222222",
  "thumbColor": "#444444",
  "thumbHoverColor": "#666666",
  "borderRadius": "0"
}

Chunky Rounded

Runtime-verified example for custom-scrollbar-generator
Input
{"width":"16","trackColor":"#e0e0e0","thumbColor":"#ff6b6b","thumbHoverColor":"#ff4f4f","borderRadius":"8"}
Output
{
  "width": "16",
  "trackColor": "#e0e0e0",
  "thumbColor": "#ff6b6b",
  "thumbHoverColor": "#ff4f4f",
  "borderRadius": "8"
}

Sample Scenario

Runtime-verified example for custom-scrollbar-generator
Input
{"width":"12","trackColor":"#f8f9fa","thumbColor":"#adb5bd","thumbHoverColor":"#6c757d","borderRadius":"6"}
Output
{
  "width": "12",
  "trackColor": "#f8f9fa",
  "thumbColor": "#adb5bd",
  "thumbHoverColor": "#6c757d",
  "borderRadius": "6"
}

Use Cases

  • Customizing default browser scrollbars to match a specific website theme or brand identity.
  • Creating dark-mode optimized scrollbars that blend seamlessly with dark application interfaces.
  • Designing minimalist or slim scrollbars for clean, modern web layouts.
  • Prototyping UI designs quickly without memorizing complex Webkit CSS syntax.

Frequently Asked Questions

Related Tools