top of page

Webflow Slider: Custom Dot Color Change Using CSS

Ashokkumar Chavada

Web Development

Mar 28, 2023

Add your brand colors to sliders by adding 4-6 lines of custom CSS code.

Webflow Slider: Custom Dot Color Change Using CSS

Use AI to summarize this article

Recently Webflow has launched an amazing feature on backgroud videos where your website visitors can stop and play background videos easity.


Watch a video to learn how you can integrate in your Webflow website too.




Follow these steps to add slider dot CSS to your Webflow website:


Step 1) Add a Webflow Slider


step 1 of how to add custom dots in webflow slider

Step 2) Go to custom code area from your project settings

Copy and paste below code to your </head> area of your custom code section.


step 2 of how to add custom dots in webflow slider

Step 3) Publish your changes

Once you're done adding above mentioned steps then now it's time push your changes to the live site.


<style>
	.w-slider-dot {background: black;}
  	.w-slider-dot.w-active {background: red;}
</style>

Click here to see the live preview.

Meet the author of this article:

Ashokkumar Chavada

Ashokkumar Chavada is a certified Webflow, Framer, and Wix Studio web designer since 2016 in India.

More Webflow, Framer, and Wix Studio guides

bottom of page