CSS SCROLLBAR GENERATOR

Scrollbar Live Preview

This is a highly customizable container demonstrating your generated scrollbar. Adjust the track color, thumb color, rounded corners, and even the thumb border using the configuration panel. Notice how the scroll track seamlessly aligns alongside the content as you scroll.

Scrollbars are essentially broken down into two main components in WebKit browsers: the track (the background area over which the scrolling piece travels) and the thumb (the draggable sliding piece). You can style these independently using pseudo-elements like ::-webkit-scrollbar-track and ::-webkit-scrollbar-thumb.

By adding borders to the thumb and applying a background color to the track, you can create inset scrollbar designs, pill-shaped scrollbars, and modern invisible layout markers. Keep scrolling down to further examine the consistency and spacing of the track!

[Scroll further down...]

Scrollbar formatting properties

#F1FF2E

#1E1E1E

px
px
px

#000000

/* Apply these styles to your container or the body */
.custom-scrollbar::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}


.custom-scrollbar::-webkit-scrollbar-track {
  background: #1e1e1e;
  border-radius: 3px;
}


.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #F1FF2E;
  border-radius: 3px;
  border: none;
}


/* For Firefox compatibility */
.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #F1FF2E #1e1e1e;
}