Amazing Showcase of Classy and Cool Custom CSS Scrollbars

Classy and Cool Custom CSS Scrollbars: A Showcase

Scrollbars have long been a detail that has remained consistent on websites for years. With the introduction of custom CSS scrollbars, designers can now give their webpages a more modern and stylish look than ever before. From subtle transitions to vibrant colors, scrollbars are no longer just a small part of a website; they can be used to draw attention and make an impactful statement.

In this post, we’re showcasing 30 stunning examples of custom scrollbars created with CSS. We’ll also provide the necessary code for each example, so you can easily get started creating your own custom scrollbars.

Stunning Examples of Custom CSS Scrollbars

Now let’s take a look at some beautiful examples of custom scrollbars created with CSS. From smooth animations to vibrant colors, these custom scrollbars will give your website an eye-catching look.

Scrollbar with Smooth Transitions

This elegant design features a scrollbar with smooth transitions. To recreate this look, use the following code:

::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background-color: #f4f4f4;
}

::-webkit-scrollbar-thumb {
  background-color: #400bff;
  border-radius: 4px;
  border: 2px solid #d8d8d8;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #8008ff;
}

Vibrant Colors

This example features bold colors that give it a striking visual appeal. To replicate this style, use the following code:

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background-color: #3c2039;
}

::-webkit-scrollbar-thumb {
  background-color: #9946b5;
  border-radius: 4px;
  border: 2px solid #5f225e;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #d282ef;
}

Textured Style

This style features a scrollbar with a textured look. To recreate this design, use the following code:

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background-color: #bfbfbf;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

::-webkit-scrollbar-thumb {
  background-color: #333;
  border-radius: 5px;
  border: 2px solid #ddd;
  box-shadow: none;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #444;
}

Conclusion

As you can see, custom scrollbars give webpages a unique look, and they are a great way to add some flair to your designs. Whether you're looking for subtle transitions or vibrant colors, you can use custom CSS scrollbars to create the perfect look for your website.