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](https://uploads-ssl.webflow.com/5d5ccddd9a3f387d210a369c/62a02bf458b43a57775b4e74_webflow%20custom%20slider%20dots%20css%20code.png)
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](https://static.wixstatic.com/media/14edb5_d37645950ccc4ff59de30a1e66b28ea2~mv2.png/v1/fill/w_48,h_26,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/14edb5_d37645950ccc4ff59de30a1e66b28ea2~mv2.png)
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](https://static.wixstatic.com/media/14edb5_8ffbed50a8d84323b4123a99547bf012~mv2.png/v1/fill/w_48,h_29,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/14edb5_8ffbed50a8d84323b4123a99547bf012~mv2.png)
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.
More NoCode guides
bottom of page