How to Use Scrollbar (scrollbar.app) to Create Custom Scrollbar CSS

Updated

Scrollbar (scrollbar.app) is a simple CSS scrollbar editor: you adjust scrollbar properties in a visual editor, preview the result in real time, then copy the generated CSS into your own project. It suits anyone who wants custom scrollbars without hand-writing every ::-webkit-scrollbar rule from scratch. The steps below cover the full workflow, from opening the editor to applying the CSS on a site.

What the editor does

The tool generates CSS for styling scrollbars. Its core loop is:

  1. Adjust scrollbar properties in the editor.
  2. Preview the styled scrollbar in real time.
  3. Copy the generated CSS code.
  4. Apply that CSS to a website or web project.

Because the preview updates as you change values, you can iterate on the look before committing to any code.

Step-by-step: from editor to your site

1. Open the editor and adjust properties

Go to scrollbar.app. The editor exposes scrollbar properties you can change directly. Typical properties in a CSS scrollbar editor include:

  • Width / size — how thick the scrollbar is.
  • Track color — the background the thumb slides along.
  • Thumb color — the draggable part.
  • Thumb hover color — the state when the pointer is over the thumb.
  • Border radius — rounded vs. square corners.
  • Track and thumb borders — outlines around either part.

Change one property at a time so you can see exactly what each value controls.

2. Watch the real-time preview

As you adjust values, the preview reflects the styled scrollbar immediately. Use it to check:

  • Whether the thumb is visible against the track.
  • Whether the size feels right for your layout.
  • Whether hover states read clearly.

If something looks wrong, adjust and re-check — no save or reload is needed.

3. Copy the generated CSS

Once the preview matches what you want, copy the generated CSS code from the editor. This is the output you will paste into your project.

4. Apply the CSS to your website

Paste the copied CSS into your stylesheet, or into a <style> block in your HTML. Then verify it in your own page:

  • Reload the page and scroll a container that overflows.
  • Confirm the scrollbar matches the preview.
  • Check hover behavior on the thumb.

Common snags to expect

  • Browser support. Scrollbar styling via ::-webkit-scrollbar and related pseudo-elements is a WebKit/Blink feature. Firefox uses different properties (scrollbar-color, scrollbar-width), so a scrollbar styled only with the generated WebKit rules may look default in Firefox. If cross-browser consistency matters, plan to add Firefox-specific rules alongside the copied CSS.
  • Scope. The generated rules apply globally unless you scope them. If you only want custom scrollbars on one element, wrap the rules with a selector for that element.
  • Overflow required. A scrollbar only appears where content overflows its container, so test on an element that actually scrolls.

When to use it

Use scrollbar.app when you want a quick, visual way to produce scrollbar CSS and copy it out. It is a generator, not a runtime library — the value is the CSS it produces, which you then own and maintain in your own codebase. If you need matching scrollbars across all major browsers, treat the generated CSS as a starting point and add the Firefox equivalents yourself.