Design

4 min

Customize the design of slider dots in Webflow

1. Add an embed element and paste in this code

CSS property	Selector	Description
background	w-slider-dot	Inactive dot color
background	w-slider-dot.w-active	Active dot color
width / height	w-slider-dot	Dot size
border-radius	w-slider-dot	Shape (24px = round, 0 = square)

Tip from Gemeos Webflow agency: adding your code in an embed element instead of in your page settings lets you see the result directly in Webflow without having to publish your site. Super handy for iterating on your CSS design without wasting time. Visible only for HTML/CSS code.

‍

2. Add the style you want

Default design

Color: Enter your desired color instead of the hex code #E0E1DD

Design: Set the desired width, height, and radius by changing the width, height, and border-radius.

‍

Active design

Same idea as the default state, but for the selected active state by adding "w-active" to the class ".w-slider-dot".

3. Publish, and you're done

good to know

In 2026, Webflow improved global CSS variables. You can centralize your dot colors in Webflow CSS variables and reuse them in your embed to make maintenance easier.

Bonus Tips

To optimize the design of your slider dots on mobile, you can use a media query to target mobile-sized screens.

Add the code below to your <style> tag

Customize the design of slider dots in Webflow

1. Add an embed element and paste in this code

2. Add the style you want

Default design

Active design

3. Publish, and you're done

In 2026, Webflow improved global CSS variables. You can centralize your dot colors in Webflow CSS variables and reuse them in your embed to make maintenance easier.

Bonus Tips

Heading

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum

Similar tutorials