The default scrollbar on websites often lacks visual appeal and doesn’t provide the best user experience. Customizing your scrollbar can enhance the aesthetics of your website or blog, making it more attractive for your visitors. In this post, we will show you how to modify and customize the scrollbar using custom CSS on WordPress or any website.
CSS Code for Custom Scrollbar
To get started with customizing your scrollbar, simply copy the code below and paste it into your Additional CSS box in the WordPress Customizer. You can easily modify the colors by adjusting the values in the code.
/* Style the scrollbar track */
*::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #F5F5F5;
border-radius: 10px;
margin-left: -10px !important;
}
/* Style the scrollbar itself */
*::-webkit-scrollbar {
width: 10px;
margin-left: -10px;
background-color: #F5F5F5 !important;
}
/* Style the scrollbar thumb */
*::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #FFF;
background-image: linear-gradient(to right, #4CB8C4 0%, #3CD3AD 51%, #4CB8C4 100%);
}How to Apply the CSS Code in WordPress
- Log in to your WordPress Dashboard.
- Go to Appearance > Customize.
- Select Additional CSS.
- Paste the provided CSS code into the text area.
- Publish the changes.
You can also tweak the colors and gradient by modifying the hex codes or adjusting the percentage values in the gradient.
Why Customize the Scrollbar?
Customizing the scrollbar can significantly improve the overall design of your website. It helps in making the website more visually pleasing, which can keep visitors engaged longer. Custom scrollbars create a more polished and modern look, aligning with your website’s design theme.
Conclusion
By customizing your scrollbar, you can provide a more appealing and unique experience for your visitors. Follow the simple steps provided above to personalize the scrollbar on your WordPress site or any other website. For further customization, feel free to experiment with the CSS values to match your website’s overall design.
