CSS scrollbar playground

Explore scrollbar-color, scrollbar-width, and scrollbar-gutter with a preview that forces vertical scrolling and generates copy-ready CSS.

This block forces vertical scrolling so you can inspect the scrollbar while changing its properties.

scrollbar-color sets the thumb and track colors with the standard CSS syntax.

scrollbar-width switches between auto, thin, and none without relying on proprietary pseudo-elements.

scrollbar-gutter reserves space for the scrollbar and helps prevent content shifts when scrolling appears.

HTML

<div class="scrollbar-demo">
  <p>
    Scrollbars are part of the interface. Use this content block to test
    scrollbar-color, scrollbar-width, and scrollbar-gutter while the element
    keeps enough text to overflow vertically.
  </p>
  <p>
    Add real content here and check how the reserved gutter changes the
    reading area when the scrollbar is visible.
  </p>
</div>

CSS

.scrollbar-demo {
  overflow-y: scroll;
  scrollbar-color: #38d5b2 #232946;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
}