How can I add a color property to my Webflow div element that can be independently changed across instances?

To allow a div element in Webflow to have a color property that's independently changeable across multiple instances, you need to use a CSS variable with a combo class or a custom attribute depending on the use case.

1. Use Combo Classes for Variations

• Apply a base class to the div element (e.g., "Box").
• Add a combo class for each variant (e.g., "Box Red", "Box Blue").
• Set a unique background color in each combo class using the Style panel under the Background section.
• Each instance of the div can now be assigned a different color by choosing the appropriate combo class.

2. Use Custom Attributes with CSS Variables (Advanced)

If you want to create a more dynamic or CMS-driven solution via custom code:

• Set a class (e.g., “Color-Box”) on your div and give each instance a custom attribute like data-color="red" or data-color="#FF0000".
• Add custom code in Page Settings → Before tag to apply that color using JavaScript. (Note: Webflow doesn’t support inline JavaScript in Designer.)
• Example (conceptually): loop through .Color-Box elements and apply style.backgroundColor = dataset.color.

3. Use CMS Fields for Dynamic Color (When Using Webflow CMS)

• In the CMS Collection, create a Color field.
• In a Collection List, bind the div’s background color or text color to that color field using the Style panel.
• Now, each instance drawn from the CMS can have an independently editable color.

Summary

Use combo classes for simple manual variations, custom attributes with JavaScript for programmatic changes, or CMS Color fields for dynamic CMS-driven styling. Each method allows your div instances to have independently controlled color properties.