Scrollbar CSS Generator

Customize and generate stylish scrollbars with our Scrollbar CSS Generator

This is a preview of your custom scrollbar. Try scrolling inside this box to see how the scrollbar looks with the current settings. You can customize the thumb color, track color, width, border radius, and more. Adjust the settings below to see the scrollbar change in real-time.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Thumb Color:
Track Color:
Width:
Border Radius:
Border Width:
Border Color:
.scrollbar::-webkit-scrollbar {
    width: 14px;
  }

.scrollbar::-webkit-scrollbar-track {
    background: #2B2B2B;
    border-radius: 0px;
  }
  
.scrollbar::-webkit-scrollbar-thumb {
    background: #1C4ED8;
    border-radius: 0px;
    border:0px solid #555777;
  }

/* Estilos para Firefox */
  * {
    scrollbar-width: thin;
    scrollbar-color: #1C4ED8 #2B2B2B;
  }

What is Scrollbar Generator?


The CSS Scrollbar Generator is a powerful web development tool designed to help designers and developers create customized scrollbars for web pages. Utilizing Cascading Style Sheets (CSS), this tool enables users to easily specify various attributes of scrollbars, such as color, width, border radius, and border style. By providing a user-friendly interface, the Scrollbar Generator allows for the precise adjustment of scrollbar aesthetics to match the overall design of a website or application. The customized CSS code generated by this tool can be directly integrated into web projects, enhancing the visual consistency and user experience. With the Scrollbar Generator, implementing stylish and cohesive scrollbars is straightforward, elevating the functional and aesthetic appeal of web interfaces.


PrivacyService TermsAbout

Made with ❤️ by gomestzx