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:
Define colors.
Define sizes and spacing.
Define fonts.
Define number.
Define percentages.
Creating a variable
Variables belong to a collection. To create a variable, you need to get the collection first.
Each variable type has its own creation function. Below are the available variable types and how to create them:
Color
Size
Number & Percentage
FontFamily
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.
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.
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.
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.
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.
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:
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.