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() and max()
• 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.