Copied!
It's on your clipboard.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Wireframes
No items found.
Basics
Oops, nothing here...
Scroll
Esc
Overview
With this snippet, you can style scrollbars across major browsers. You can make them thinner, add rounded corners, customize the track and thumb colors, and include a hover effect for a modern look.
Documentation
Code Setup
Walkthrough
Copy To Elementor
Setup: Add Custom CSS
Add this code with a snippets plugin in <head>, or place it in Page CSS block or Site Settings.
/* Firefox */
* {
scrollbar-width: thin;
scrollbar-color: #999 #f1f1f1; /* thumb | track */
}
/* Chrome, Edge, Safari, Opera (WebKit / Blink) */
*::-webkit-scrollbar {
width: 10px;
height: 10px;
}
*::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 8px;
border: 1px solid #ddd;
}
*::-webkit-scrollbar-thumb {
background: #999;
border-radius: 8px;
border: 2px solid #f1f1f1;
transition: background 0.25s ease;
}
*::-webkit-scrollbar-thumb:hover {
background: #777;
}
*::-webkit-scrollbar-corner {
background: transparent;
}Publish and preview live
Some solutions only work on the live site. Always publish and test after each change, as results may not appear in the editor.
Absolutely Codefree
If you were expecting some fancy snippet, sorry. This one runs just fine on its own.
C’mon, You Got This
Do we really need to spell this one out? It’s as straightforward as it gets.
