Feature
Designer
Advanced variables with functions
Define dynamic design values in Webflow using CSS functions like clamp(), calc(), min(), max(), and color-mix(). Function variables make it easier to create flexible, reusable styles for modern, scalable websites.
We’re expanding the power of Variables in Webflow. With the release of function variables, you can now define values using native CSS functions like clamp(), calc(), min(), and max() — directly within Webflow.
This makes your style values more responsive, flexible, and reusable — helping you build scalable design systems without relying on custom code.
What are function variables?
You can set your variable values using CSS functions. That means you can:
- Create fluid, responsive sizes with
clamp() - Perform layout math with
calc() - Apply logic-based styling with
min()andmax() - Blend and modify colors programatically with
color-mix()
Just like any other variable in Webflow, these function values can be reused throughout your site and updated from a single source of truth.
A faster, smarter editing experience
To support Function variables, we’ve refreshed the workflows around how you create, connect, and edit variables:
- The purple dot menu is now the "Connect" menu – renamed to better reflect its purpose: connecting style properties to variables, data, or custom values. You’ll also find a new filter option to help you quickly find what you need.
- A redesigned custom value editor gives you more power and flexibility, with features like:
- Autocomplete for variables and CSS functions
- Built-in MDN references and code snippets
- Multi-cursor editing, keyboard shortcuts, and full support for newlines and tabbing
- Time-saving shortcuts streamline your workflow:
- From the Variables panel, paste a CSS function directly into a variable field
- Hit
=when setting a style property or a variable to jump straight into the function editor
These updates are designed to make dynamic styling feel intuitive, even if you’re not writing CSS by hand.
We’re expanding the power of Variables in Webflow. With the release of function variables, you can now define values using native CSS functions like clamp(), calc(), min(), and max() — directly within Webflow.
This makes your style values more responsive, flexible, and reusable — helping you build scalable design systems without relying on custom code.
What are function variables?
You can set your variable values using CSS functions. That means you can:
- Create fluid, responsive sizes with
clamp() - Perform layout math with
calc() - Apply logic-based styling with
min()andmax() - Blend and modify colors programatically with
color-mix()
Just like any other variable in Webflow, these function values can be reused throughout your site and updated from a single source of truth.
A faster, smarter editing experience
To support Function variables, we’ve refreshed the workflows around how you create, connect, and edit variables:
- The purple dot menu is now the "Connect" menu – renamed to better reflect its purpose: connecting style properties to variables, data, or custom values. You’ll also find a new filter option to help you quickly find what you need.
- A redesigned custom value editor gives you more power and flexibility, with features like:
- Autocomplete for variables and CSS functions
- Built-in MDN references and code snippets
- Multi-cursor editing, keyboard shortcuts, and full support for newlines and tabbing
- Time-saving shortcuts streamline your workflow:
- From the Variables panel, paste a CSS function directly into a variable field
- Hit
=when setting a style property or a variable to jump straight into the function editor
These updates are designed to make dynamic styling feel intuitive, even if you’re not writing CSS by hand.
Related updates
.jpeg)
.jpeg)
.jpeg)
Get started for free
Try Webflow for as long as you like with our free Starter plan. Purchase a paid Site plan to publish, host, and unlock additional features.
Try Webflow for as long as you like with our free Starter plan. Purchase a paid Site plan to publish, host, and unlock additional features.
Try Webflow for as long as you like with our free Starter plan. Purchase a paid Site plan to publish, host, and unlock additional features.
Try Webflow for as long as you like with our free Starter plan. Purchase a paid Site plan to publish, host, and unlock additional features.