How to change color of Webflow slider dots [Easy Method]

If you're working with sliders in Webflow, you've probably noticed that there's no built-in way to customize the color of the navigation dots. The only native option is to invert the colors, which just switches between light and dark mode. But what if you want full control over the colors?

In this post, I’ll show you how to easily change the color of your slider navigation dots in Webflow using a few lines of CSS.

Why Webflow Doesn’t Let You Change Slider Dot Colors Natively

If you’ve tried adjusting the slider dot colors through the Style Panel or Settings Panel, you already know that Webflow doesn’t offer a direct option for this. The only available setting is the Invert Colors option under the Slide Nav Settings, which is limited to toggling between a light and dark mode.

Thankfully, with a simple CSS snippet, you can fully customize the look of your slider dots—including setting unique colors for the active and inactive states.

Step-by-Step Guide to Changing Slider Navigation Dot Colors

1. Add the Custom CSS to Your Page

To change the slider navigation dot colors, you’ll need to insert a small CSS snippet into the Head of the page where your slider exists.

Here’s how:

1. Open Webflow Designer and go to the page with your slider.
2. Click on the Page Settings (⚙️ icon).
3. Scroll down to the Custom Code section.
4. In the Head section, paste the following code.
5. Click Save and Publish your site.

<style>
.w-slider-dot {
  background: teal;
}
.w-slider-dot.w-active {
  background: aqua;
}
</style>

‍
2. Customize Your ColorsThe above code sets inactive dots to orange and the active dot to red, but you can customize it to match your brand’s color palette.

To use custom colors:

• Replace orange and red with the HEX codes of your desired colors.
• Example: If your active dot should be #1E90FF (blue) and your inactive dots should be #FFD700 (gold), paste the hex code in place of the colors in the code provided.

3. Publish to See the Changes. You must publish your site to see the color changes—they won’t be visible in Webflow’s preview mode unless you use an embed code block placed above your slider.

P.S. For this method to work, click on your slider component and in the Settings Panel make sure the setting "Invert Colors" is turned off.