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.