Free tool

Custom Scrollbar Generator

Scrollbars matching your design via ::-webkit-scrollbar and scrollbar-color, with a preview applied live.

The preview uses your live settings; scroll inside the panel.

Sample content line number 1.

Sample content line number 2.

Sample content line number 3.

Sample content line number 4.

Sample content line number 5.

Sample content line number 6.

Sample content line number 7.

Sample content line number 8.

Sample content line number 9.

Sample content line number 10.

Sample content line number 11.

Sample content line number 12.

Sample content line number 13.

Sample content line number 14.

Sample content line number 15.

Sample content line number 16.

Sample content line number 17.

Sample content line number 18.

Sample content line number 19.

Sample content line number 20.

Sample content line number 21.

Sample content line number 22.

Sample content line number 23.

Sample content line number 24.

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

::-webkit-scrollbar-track {
  background: #1e1b29;
}

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

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

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #7c3aed #1e1b29;
}

Built by

Miguel Ángel Colorado Marin (MACM)

Full-Stack Developer · Guadalajara, España

I develop web apps, digital tools and full projects — from design to deployment.

GitHubLinkedInBuy me a coffee
Contact me

The default scrollbar breaks any polished design, but customizing it has a catch: Chromium and Safari use the ::-webkit-scrollbar pseudo-classes while Firefox implements the standard scrollbar-width and scrollbar-color properties. A truly cross-platform scrollbar needs both syntaxes. This generator produces them together, with independent thickness, radii and colors for the thumb, hover state and track. The magic is in the preview: the sample panel applies your settings live, so you can actually scroll inside the tool and feel the result before copying the CSS.

Features

  • ✓Dual syntax: WebKit (Chromium/Safari) and Firefox
  • ✓Thickness, radius, thumb, hover and track colors
  • ✓Real preview with working scroll inside the tool
  • ✓Includes scrollbar-width and scrollbar-color
  • ✓100% in browser, no sign-up

How do I customize a scrollbar?

  1. 1

    Set thickness and shape

    Bar thickness and thumb corner radius.

  2. 2

    Pick the three colors

    Thumb, hover state and the track underneath.

  3. 3

    Try scrolling

    The sample panel reflects your settings instantly.

  4. 4

    Apply the CSS globally

    Paste it into your base stylesheet to affect the whole page.

Frequently asked questions

Why two different syntaxes?

The -webkit- pseudo-classes are a proprietary mechanism kept by Chromium and Safari; Firefox refuses to implement them and offers the standard CSS Scrollbars properties instead. Covering real users requires emitting both.

Can I style just one panel's scrollbar?

Yes: replace the global *::-webkit-scrollbar selector with .my-panel::-webkit-scrollbar and move scrollbar-color onto the panel instead of *.

Does it work on mobile?

iOS and Android typically use native overlay scrollbars that ignore these styles. Customization shines on desktop; don't rely on it for mobile.

Related tools

Glassmorphism Generator

Frosted-glass effect with blur and transparency.

Color Converter

HEX, RGB, HSL and WCAG contrast.

CSS Unit Converter

px, rem, em, vw, vh, pt in real time.

Border Radius

Corners and organic blobs.

Embed Custom Scrollbar Generator on your site

Add Custom Scrollbar Generator to any web page with a simple iframe. Free, with attribution to miguelacm.es.

<iframe
  src="https://miguelacm.es/embed/custom-scrollbar-generator"
  width="100%"
  height="700"
  frameborder="0"
  title="Custom Scrollbar Generator — miguelacm.es"
></iframe>
View embed in new tab →
View source on GitHub