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.

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() 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.

Launched on
June 3, 2025
Category
Designer