Advanced variables with functions

<p id="">We’re expanding the power of Variables in Webflow. With the release of <strong id="">function variables</strong>, you can now define values using native CSS functions like <code id="">clamp()</code>, <code id="">calc()</code>, <code id="">min()</code>, and <code id="">max()</code> — directly within Webflow.</p><p id="">This makes your style values more responsive, flexible, and reusable — helping you build scalable design systems without relying on custom code.<br>‍</p><h3 id="">What are function variables?</h3><p id="">You can set your variable values using CSS functions. That means you can:</p><ul id=""><li id="">Create fluid, responsive sizes with <code id="">clamp()</code></li><li id="">Perform layout math with <code id="">calc()</code></li><li id="">Apply logic-based styling with <code id="">min()</code> and <code id="">max()</code></li><li id="">Blend and modify colors programatically with <code id="">color-mix()</code></li></ul><p id="">Just like any other variable in Webflow, these function values can be reused throughout your site and updated from a single source of truth.</p><div data-rt-embed-type='true'><figure style="max-width: 100%;">

  <div style="position: relative; width: 100%;">

    <!--video (update src to change video)-->

    <video style="width: 100%;" src="<https://dhygzobemt712.cloudfront.net/Web/updates/function-variables.webm>" muted autoplay loop playsinline></video>

    <!--play/pause button-->

    <a video-playback="button" role="button" href="#" class="bg-video_playback-btn w-inline-block">

      <div video-playback="pause" class="bg-video_playback-btn-state cc-pause">

        <div class="bg-video_playback-btn-icon w-embed">

          <svg xmlns="<http://www.w3.org/2000/svg>" viewBox="0 0 24 24" fill="currentColor">

            <title>Pause</title>

            <path d="M8 7H11V17H8zM13 7H16V17H13z"></path>

          </svg>

        </div>

      </div>

      <div video-playback="play" class="bg-video_playback-btn-state cc-play">

        <div class="bg-video_playback-btn-icon w-embed">

          <svg xmlns="<http://www.w3.org/2000/svg>" viewBox="0 0 24 24" fill="currentColor">

            <title>Play</title>

            <path d="M7 6L7 18 17 12z"></path>

          </svg>

        </div>

      </div>

    </a>

  </div>

  <!--caption text

  <figcaption style="margin-top: 1rem;"></figcaption>-->

</figure>

​

<!-- Scripts for inline video functionality -->

<script>

  window.addEventListener('load', async () => {

    // Get all buttons with the attribute 'video-playback="button"'

    const buttons = document.querySelectorAll('a[video-playback="button"]');

​

    // Add click event listeners to each button

    buttons.forEach(button => {

      button.addEventListener('click', (event) => {

        event.preventDefault(); // Prevent default action of the button

​

        // Find the parent element and then the video within the same container

        const video = button.parentNode.querySelector('video');

​

        // Toggle play/pause based on the video's current state

        if (video.paused) {

          video.play();

          button.querySelector('[video-playback="pause"]').style.display = 'block';

          button.querySelector('[video-playback="play"]').style.display = 'none';

        } else {

          video.pause();

          button.querySelector('[video-playback="play"]').style.display = 'block';

          button.querySelector('[video-playback="pause"]').style.display = 'none';

        }

      });

    });

​

    // fallback: show controls if autoplay fails

    let video = document.querySelector('video[muted][autoplay]');

    try {

      await video.play();

    } catch (err) {

      video.controls = true;

    }

  });

​

</script></div><h3 id="">A faster, smarter editing experience</h3><p id="">To support Function variables, we’ve refreshed the workflows around how you create, connect, and edit variables:</p><ul id=""><li id=""><strong id="">The purple dot menu is now the "Connect" menu</strong> – renamed to better reflect its purpose: connecting style properties to variables, data, or custom values. You’ll also find a new <strong id="">filter</strong> option to help you quickly find what you need.</li><li id=""><strong id="">A redesigned custom value editor</strong> gives you more power and flexibility, with features like:<ul id=""><li id="">Autocomplete for variables and CSS functions</li><li id="">Built-in MDN references and code snippets</li><li id="">Multi-cursor editing, keyboard shortcuts, and full support for newlines and tabbing</li></ul></li><li id=""><strong id="">Time-saving shortcuts</strong> streamline your workflow:<ul id=""><li id="">From the Variables panel, paste a CSS function directly into a variable field</li><li id="">Hit <code id="">=</code> when setting a style property or a variable to jump straight into the function editor</li></ul></li></ul><p id="">These updates are designed to make dynamic styling feel intuitive, even if you’re not writing CSS by hand.</p>