Get CSS name | Webflow Developer Documentation

`variable.getCSSName()`

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

This is distinct from variable.getBinding(), 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

1 variable.getCSSName(): Promise<string>

Returns

Promise<string>

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

Example

1 // Create a variable
2 const webflowBlue = await collection?.createColorVariable(
3   "blue-500",
4   "#146EF5"
5 );
6 
7 // Get the CSS name for the variable
8 const cssName = await webflowBlue.getCSSName();
9 // cssName = "--blue-500"

Designer ability

Designer Ability	Locale	Branch	Workflow	Sitemode
canReadVariables	Any	Any	Any	Any

1	// Create a variable
2	const webflowBlue = await collection?.createColorVariable(
3	"blue-500",
4	"#146EF5"
5	);
6
7	// Get the CSS name for the variable
8	const cssName = await webflowBlue.getCSSName();
9	// cssName = "--blue-500"