Type to search… it’s not that hard.
Bummer… nothing matched that.
Info
Customizes the browser scrollbar across WebKit (Chrome, Edge, Safari, Opera) and Firefox for a clean, consistent look aligned with your site’s branding.
Setup
00
Add Custom CSS
Paste the code through the page or site settings, or add it via Elementor → Custom Code before body tag.
/* WebKit (Chrome, Edge, Safari, Opera) */
*::-webkit-scrollbar {
width: 10px; /* vertical scrollbar width */
height: 10px; /* horizontal scrollbar height */
}
*::-webkit-scrollbar-track {
background: none; /* track background */
}
*::-webkit-scrollbar-thumb {
background: #379AFF; /* thumb color */
border-radius: 10px; /* thumb radius */
transition: background 0.2s ease; /* thumb color transition */
}
*::-webkit-scrollbar-thumb:hover {
background: #2556FF; /* hover thumb color */
}
/* Firefox */
@supports (-moz-appearance: none) {
* {
scrollbar-width: thin; /* scrollbar width */
scrollbar-color: #379AFF transparent; /* thumb + track color */
}
}00
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.