> This page is for Home.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://developers.webflow.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://developers.webflow.com/_mcp/server.

# Use functions in variables

> Use functions in variables

Variables now support using a set of CSS functions in their values, allowing you to create more flexible and dynamic design tokens.

Webflow supports the following [CSS functions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_Value_Functions#math_functions) in variables:

| Function      | Purpose                                 | Example                                         |
| ------------- | --------------------------------------- | ----------------------------------------------- |
| `calc()`      | Perform mathematical calculations       | `calc(100vh - var(--header-height))`            |
| `clamp()`     | Create fluid values with min/max bounds | `clamp(1rem, 5vw, 3rem)`                        |
| `min()`       | Use the smallest of multiple values     | `min(50%, 300px)`                               |
| `max()`       | Use the largest of multiple values      | `max(100px, 20%)`                               |
| `color-mix()` | Blend colors together                   | `color-mix(in srgb, var(--primary) 75%, white)` |

### Custom values

To use functions in variables, you need to create or set them as custom values. All variable creation methods accept a `CustomValue` object as the value parameter, and the `variable.set()` method can also update variable values with custom values. For the custom values object, the `type` property is always `"custom"` and the `value` property is a string containing the CSS function.

**CustomValue type**

```typescript
type CustomValue = {
  type: "custom";
  value: string;
};
```

#### Create a custom value

```typescript
// Get collection
const collection = await webflow.getDefaultVariableCollection()

// Create a Color Variable
const colorVariable = await collection.createColorVariable("blue-500", "#146EF5")

// Create a Color Variable with a custom value
await colorVariable.set({
    type: "custom",
    value: `color-mix(in srgb, #146EF5, white 75%)`
});
```

#### Set a custom value

```typescript
variable.set({
    type: "custom",
    value: "clamp(1rem, 2vw, 2rem)"
});
```

### Reference variables in functions

When using functions, you can reference other variables using the `var()` syntax. This allows you to create dynamic relationships between your design tokens. To dynamically get this syntax, use the new [`getBinding()`](/designer/reference/get-variable-binding) method on a variable.

```typescript
// Get collection
const collection = await webflow.getDefaultVariableCollection()

// Create a Color Variable
const colorVariable = await collection.createColorVariable("blue-500", "#146EF5")

// Get the binding for the variable
const binding = await colorVariable.getBinding()

// Create a Color Variable with a custom value
await colorVariable.set({
    type: "custom",
    value: `color-mix(in srgb, ${binding}, white 75%)`
});
```

### Getting the value of a custom variable

To get the value of a custom variable, add the `customValues` property as an optional parameter to the `variable.get()` method.

```typescript
const myValue = await colorVariable.get({
    customValues: true
})

console.log(myValue)
// Returns a CustomValue object
// {
//     type: "custom",
//     value: "color-mix(in srgb, #146EF5, white 75%)"
// }
```

> **Warning**
>
> Using `variable.get()` without setting `customValues: true` will throw an error if the variable has a custom value. It's recommend to always setting `customValues: true` when getting the value of a variable.