Variables

Variables are reusable design tokens that let you define and manage values across your Webflow projects. They enable you to create a single source of truth for common values like colors, spacing, and typography. When you update a variable’s value, that change automatically propagates everywhere the variable is used, making it easy to maintain consistency and make global design updates.

Assign variables to any compatible style property. For example, you can use color variables for background colors, size variables for padding and margins, or font variables for typography. When the variable’s value changes, all style properties using that variable will automatically update, providing a powerful way to maintain design consistency and make global updates efficiently.

Variable types

Webflow currently supports five types of variables:

Creating a variable

Variables belong to a collection. To create a variable, you need to get the collection first.

1const collection = await webflow.getVariableCollectionById("Your Collection ID")

Each variable type has its own creation function. Below are the available variable types and how to create them:

1collection.createColorVariable(name: string, value: string | ColorVariable | CustomValue): Promise<ColorVariable>
Accepted Formats for ValueExamples
Color namecollection.createColorVariable("primary", "red");
RGB Hexcollection.createColorVariable("primary", "#ffcc11");
RGBA Hexcollection.createColorVariable("primary", "#fffcc11");

Variable aliases

Variable aliases allow you to create references between variables, making it easier to maintain consistent design systems and create dynamic relationships between your variables. When you update the original variable, all aliases automatically reflect the change.

1// Get the default variable collection
2const collection = await webflow.getDefaultVariableCollection();
3
4// Create primary brand color variable
5const primaryColor = await collection.createColorVariable("primary-brand", "#0066FF");
6
7// Create aliases that reference the primary color
8const buttonColor = await collection.createColorVariable("button-primary", primaryColor);
9const linkColor = await collection.createColorVariable("link-color", primaryColor);
10
11// When primaryColor changes, buttonColor and linkColor will automatically update
12await primaryColor.set("#FF0066");

Custom values

Webflow supports using functions in variables to create dynamic, responsive design systems. Custom values work with any variable type. See more on using functions with custom values.

Selecting variables

Select variables from their Collection by their name or ID.

1// Get Default Collection
2const collection = await webflow.getDefaultVariableCollection()
3
4// Get variable by ID
5const variableById = await collection?.getVariable('id-123')
6
7// Get Variable by Name
8const variableByName = await collection?.getVariableByName('Space Cadet')

Updating variables

Renaming and setting new values on a variable.

Renaming variables

Variables in Webflow can be renamed for better clarity or organization. After you’ve successfully renamed a variable, all instances where this variable is used will automatically reference the new name.

1// Get Collection
2const collection = await webflow.getDefaultVariableCollection()
3
4if (collection) {
5
6 // Get variable and reset name
7 const variable = await collection.getVariableByName("Space Cadet")
8 await variable?.setName('Our awesome bg color')
9}

Setting variable values

A variable type (size, percentage, number, color, font family) in Webflow cannot be changed. However, its value can be updated. The format for updating the value is consistent with its initial declaration.

1// Get Collection
2const collection = await webflow.getDefaultVariableCollection()
3
4// Get Variable
5const variable = await collection?.getVariable('id-123')
6
7// Check Variable type and set color
8if (variable?.type === "Color") await variable.set("#fffcc11");

Applying variables to styles

After defining your variables, you can incorporate them into your styles. To do this, simply use the variable as the property value in the style you’re customizing.

1// Get collection
2const collection = await webflow.getDefaultVariableCollection()
3
4// Get Style and desired variable
5const style = await webflow.getStyleByName(styleName)
6const variable = await collection?.getVariablebyName(variableName)
7
8// Check variable type and set property
9if (variable?.type === 'Size') await style?.setProperties({ "font-size": variable})

Using functions in variables

Webflow’s variable system supports a limited set of CSS functions, enabling you to create dynamic, responsive, and mathematically-derived values.

Available functions

Webflow supports these CSS functions in variables:

FunctionPurposeExample
calc()Perform mathematical calculationscalc(100vh - var(--header-height))
clamp()Create fluid values with min/max boundsclamp(1rem, 5vw, 3rem)
min()Use the smallest of multiple valuesmin(50%, 300px)
max()Use the largest of multiple valuesmax(100px, 20%)
color-mix()Blend colors togethercolor-mix(in srgb, var(--primary) 75%, white)

Using functions with custom values

To use functions in variables, you need to create or set them as custom values. Custom values work with any variable type.

Variable References

When using functions, you can reference other variables using the var() syntax. This allows you to create dynamic relationships between your design tokens. To dynamically get this syntax, you can use the getBinding() method on a variable.

1variable.set({
2 type: "custom",
3 value: "calc(var(--spacing-base) * 2)"
4});
1// Get collection
2const collection = await webflow.getDefaultVariableCollection()
3
4// Create a Color Variable
5const colorVariable = await collection.createColorVariable("blue-500", "#146EF5")
6
7// Get the binding for the variable
8const binding = await colorVariable.getBinding()
9
10// Create a Color Variable with a custom value
11await colorVariable.set({
12 type: "custom",
13 value: `color-mix(in srgb, ${binding}, white 75%)`
14});