You can build more fluid and responsive design systems by utilizing function variables in your site. Unlike regular (static) variables, function variables let you set CSS functions as variable values. For instance, you can use clamp() to specify fluid typography scales or color-mix() to create a color ramp.
Webflow currently supports the following functions for use in variables:
clamp()calc()min()max()color-mix()
To change existing static variables to function variables:
- Open the Variables panel
- Hover over a variable’s existing value and open the Connect menu by clicking the purple “binding” dot
- Click the Filter menu button
- Click Functions
- Choose a function variable (e.g., clamp())
- Add your values in the custom value editor (e.g., clamp(3.18rem, 2.606rem + 2.87vw, 5.19rem))
- Press Command + Enter to save your function variable
Note that you can’t self-reference base variables in a function across breakpoints. And, if you reference a variable across Collections, the reference will always use the base variable’s value.
To create a variable from a style property’s custom value:
- Select an element using the custom value
- Click a variable input field (i.e., swatch, size input field, font field) in the Style panel
- Click the “plus” icon
- Create your variable with a name and value
- Click Save