TailwindreadyTailwindready
Free tool

Scrollbar Generator

Pick a width and colors and scroll the preview box. You get Tailwind classes for WebKit browsers, the standard properties for Firefox, and plain CSS.

Scroll this box to see the custom scrollbar. Line 1 of 24: the quick brown fox jumps over the lazy dog.

Scroll this box to see the custom scrollbar. Line 2 of 24: the quick brown fox jumps over the lazy dog.

Scroll this box to see the custom scrollbar. Line 3 of 24: the quick brown fox jumps over the lazy dog.

Scroll this box to see the custom scrollbar. Line 4 of 24: the quick brown fox jumps over the lazy dog.

Scroll this box to see the custom scrollbar. Line 5 of 24: the quick brown fox jumps over the lazy dog.

Scroll this box to see the custom scrollbar. Line 6 of 24: the quick brown fox jumps over the lazy dog.

Scroll this box to see the custom scrollbar. Line 7 of 24: the quick brown fox jumps over the lazy dog.

Scroll this box to see the custom scrollbar. Line 8 of 24: the quick brown fox jumps over the lazy dog.

Scroll this box to see the custom scrollbar. Line 9 of 24: the quick brown fox jumps over the lazy dog.

Scroll this box to see the custom scrollbar. Line 10 of 24: the quick brown fox jumps over the lazy dog.

Scroll this box to see the custom scrollbar. Line 11 of 24: the quick brown fox jumps over the lazy dog.

Scroll this box to see the custom scrollbar. Line 12 of 24: the quick brown fox jumps over the lazy dog.

Scroll this box to see the custom scrollbar. Line 13 of 24: the quick brown fox jumps over the lazy dog.

Scroll this box to see the custom scrollbar. Line 14 of 24: the quick brown fox jumps over the lazy dog.

Scroll this box to see the custom scrollbar. Line 15 of 24: the quick brown fox jumps over the lazy dog.

Scroll this box to see the custom scrollbar. Line 16 of 24: the quick brown fox jumps over the lazy dog.

Scroll this box to see the custom scrollbar. Line 17 of 24: the quick brown fox jumps over the lazy dog.

Scroll this box to see the custom scrollbar. Line 18 of 24: the quick brown fox jumps over the lazy dog.

Scroll this box to see the custom scrollbar. Line 19 of 24: the quick brown fox jumps over the lazy dog.

Scroll this box to see the custom scrollbar. Line 20 of 24: the quick brown fox jumps over the lazy dog.

Scroll this box to see the custom scrollbar. Line 21 of 24: the quick brown fox jumps over the lazy dog.

Scroll this box to see the custom scrollbar. Line 22 of 24: the quick brown fox jumps over the lazy dog.

Scroll this box to see the custom scrollbar. Line 23 of 24: the quick brown fox jumps over the lazy dog.

Scroll this box to see the custom scrollbar. Line 24 of 24: the quick brown fox jumps over the lazy dog.

Preview uses the WebKit pseudo-elements, so it shows in Chrome, Edge and Safari. Firefox uses the standard properties below.

Thumb corners
Tailwind classes (Chrome, Edge, Safari)
[&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar]:h-2 [&::-webkit-scrollbar-track]:bg-gray-100 [&::-webkit-scrollbar-thumb]:bg-cyan-700 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb:hover]:bg-[#094f62]
Tailwind classes (Firefox and current Chrome)
[scrollbar-width:thin] [scrollbar-color:#0e7490_#f3f4f6]
Plain CSS
.scroll-area::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.scroll-area::-webkit-scrollbar-track {
  background: #f3f4f6;
}
.scroll-area::-webkit-scrollbar-thumb {
  background: #0e7490;
  border-radius: 9999px;
}
.scroll-area::-webkit-scrollbar-thumb:hover {
  background: #094f62;
}

/* Firefox and current Chrome */
.scroll-area {
  scrollbar-width: thin;
  scrollbar-color: #0e7490 #f3f4f6;
}

Frequently asked questions

How do I style a scrollbar with Tailwind CSS?

Tailwind has no scrollbar utilities in core, so use arbitrary variants such as [&::-webkit-scrollbar]:w-2 and [&::-webkit-scrollbar-thumb]:bg-cyan-700 on the scrolling element. This tool writes them for you.

Why are there two sets of classes?

WebKit and Blink browsers use the ::-webkit-scrollbar pseudo-elements, while the standard scrollbar-width and scrollbar-color properties work in Firefox and recent Chrome. In Chrome 121 and later, the standard properties take over when they are set.

Can I set an exact scrollbar width in Firefox?

No. The standard scrollbar-width property only accepts auto, thin and none, so Firefox cannot match a custom pixel width.

How do I hide a scrollbar but keep scrolling?

Use [scrollbar-width:none] plus [&::-webkit-scrollbar]:hidden. Be careful: hiding it removes the visual hint that content scrolls, so only do it where another cue exists.

Guides that go with this tool

More free Tailwind CSS tools

SVG to data URIEncode SVG for CSS, img tags and Tailwind backgrounds.Tailwind class cleanerDedupe, sort and find conflicts in a class list.Tailwind breakpointsA live breakpoint viewer plus the default values.CSS to Tailwind converterPaste CSS and get Tailwind v4 utility classes back.Box shadow generatorLayer shadows visually and copy the Tailwind class.Color palette generatorA full 50–950 shade scale and color combinations from any base color.

Browse all 34 Tailwind CSS tools

More free tools & components

Keep going with another tool, or grab a ready-made component.

Border radius generatorColor converterBrowse components