> This page is for Designer API.

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

# Get CSS name

> Learn how to get the CSS name of a variable in the Designer.

## `variable.getCSSName()`

Returns the custom property name of a variable (e.g., `--primary`).

> **Note**
>
> This is distinct from
> [`variable.getBinding()`](/designer/reference/get-variable-binding), which
> returns the variable wrapped in a `var()` function (e.g., `var(--primary)`).
> Use `getCSSName()` when you need a reference to the variable's name, for
> example, to override its value in a custom stylesheet.

### Syntax

```typescript
variable.getCSSName(): Promise<string>
```

### Returns

**Promise\<*string*>**

A Promise that resolves to the variable's CSS name.

### Example

```typescript
// Create a variable
const webflowBlue = await collection?.createColorVariable(
  "blue-500",
  "#146EF5"
);

// Get the CSS name for the variable
const cssName = await webflowBlue.getCSSName();
// cssName = "--blue-500"
```

### Designer ability

| Designer Ability     | Locale | Branch | Workflow | Sitemode |
| :------------------- | :----- | :----- | :------- | :------- |
| **canReadVariables** | Any    | Any    | Any      | Any      |