intermediatewebflowstyling

How to duplicate a class in Webflow?

Flowversity··3 min read

Duplicating a class in Webflow is useful when you need a new class that starts with the same styling as an existing one but will diverge from there. Unlike combo classes (which remain linked to a base), a duplicated class becomes fully independent.

Duplicating a class

Webflow does not have a single "duplicate class" button in the Style Manager. Instead, you duplicate a class by applying it to an element and then creating a new class from it:

  1. Add an element to the canvas (or select an existing one).
  2. Apply the class you want to duplicate to that element.
  3. In the Style panel, click the class name at the top.
  4. Type a new name — do not select the existing class from the dropdown.
  5. Press Enter.

Webflow creates a new independent class with all the same styling properties as the original. From this point on, the two classes have no connection. Changes to one will not affect the other.

Alternative: using the Style Manager

You can also work from the Style Manager:

  1. Open the Style Manager (press G then S).
  2. Find the class you want to duplicate.
  3. Select an element on the canvas and apply that class to it.
  4. In the Style panel, rename the class to something new.
  5. Confirm — the new class is created as a copy.

When to duplicate vs. use a combo class

Duplicate when:

  • The new class will diverge significantly from the original
  • You need an independent class that can be applied without the base
  • You want to branch off a completely new component

Use a combo class when:

  • You only need to override a few properties
  • The variant should inherit base class updates automatically
  • You want a clear base/modifier relationship

Things to watch out for

  • No ongoing link: Once duplicated, the new class is entirely separate. Fixing a bug in the original will not fix it in the copy.
  • Combo classes do not carry over: If the original element had combo classes applied, the duplicated base class does not include those combos. You would need to recreate them.
  • File size: Each duplicated class adds to your stylesheet. If multiple variants share most styles, combo classes are more efficient.

Duplicating classes is a quick way to spin up new variations, but consider whether a combo class or a shared base class might be a cleaner approach for your project's long-term maintainability.

Want to skip the build?

Browse 60+ premium templates and launch your site in days, not weeks.

Explore Templates