top of page

Webflow Slider: Custom Dot Color Change Using CSS

Ashok 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

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.

Webflow Template Editing Course for FREE!

More NoCode guides

Ready to leverage the power of NoCode?

Discover how a no-code website can help you reach new audiences, boost conversions, and achieve your business goals. Get in touch to learn more!

bottom of page