How to Add a Beautiful Custom Scrollbar in WordPress (Elementor + CSS)

If you want your website to look more premium, a custom scrollbar is a small detail that makes a big difference. In this tutorial, you’ll add a modern scrollbar style using a short CSS snippet—perfect for Elementor users.

What this custom scrollbar does

• Changes the scrollbar width
• Adds a clean track background color
• Adds a gradient scrollbar thumb with rounded corners

Important note (don’t skip)

This scrollbar styling works mainly in Chrome, Edge, Brave, Opera (WebKit-based browsers). Firefox uses a different scrollbar system, so this exact code won’t fully apply there.

Step 1: Add the CSS in Elementor

Pick ONE of these ways:

Option A (Recommended): Elementor → Site Settings

1. Go to Elementor → Site Settings
2. Open Custom CSS
3. Paste the code below
4. Click Update

Option B: WordPress Customizer

1. Go to Appearance → Customize
2. Open Additional CSS
3. Paste the code
4. Publish

Step 2: Paste this CSS code

::-webkit-scrollbar{
    width: 0.9vw;
    background: #777;
}
::-webkit-scrollbar-thumb{
    background: linear-gradient(transparent,#30ff00);
    border-radius: 20px;
}

Quick customization tips

• Scrollbar width: change 0.9vw to something like 10px if you want consistent size across screens.
• Track color: change #777 to match your theme colors.
• Thumb color: replace #30ff00 with your brand color.
• Roundness: increase/decrease border-radius.

Example (cleaner + more consistent):

::-webkit-scrollbar{ width: 10px; background: #777; }

Common issues

• Not showing? Clear cache (plugin + browser) and hard refresh (Ctrl+F5 / Cmd+Shift+R).
• Only works in some browsers? That’s normal—Firefox needs different CSS.