Designer Tools

Styles

Create and manage styles, classes, and CSS properties in the Webflow Designer using the Styles tools. These tools let you create new styles, update existing ones, and manage style properties across breakpoints.

The MCP Companion App must be open in the Webflow Designer for these tools to function.

Webflow only supports long-form names of CSS properties

Use the long-form CSS property names when setting styles. For example, use grid-row-gap instead of row-gap. See the MDN CSS Properties reference for complete property names.

Style tool

Create and manage classes and CSS properties in the Webflow Designer using the Style tool.

Tool: style_tool

siteId
stringRequired

Unique identifier for the site.

actions
arrayRequired

An array of style actions to perform. See action examples below.

Create style

Create a new style with specified properties.

name
stringRequired

The name of the new style.

properties
arrayRequired

An array of property objects.

property_name
stringRequired

The CSS property name (use longhand, e.g., margin-top).

property_value
string

The static value for the property.

variable_as_value
string

The ID of a variable to use as the value.

parent_style_name
string

The name of a parent style to create a combo class.

{{ title: 'Action Example' }}
1{
2  "actions": [
3    {
4      "create_style": {
5        "name": "Primary Button",
6        "properties": [
7          { "property_name": "background-color", "property_value": "#007bff" }
8        ]
9      }
10    }
11  ]
12}

Get styles

Retrieve a list of styles from the site.

query
'all' | 'filtered'Required

Specify “all” to get all styles or “filtered” to use filter_ids.

skip_properties
boolean

If true, the response will not include style properties.

include_all_breakpoints
boolean

If true, includes styles from all breakpoints (can be data-intensive).

filter_ids
array

An array of style IDs to retrieve when query is “filtered.”

{{ title: 'Action Example' }}
1{
2  "actions": [
3    {
4      "get_styles": {
5        "query": "all",
6        "skip_properties": true
7      }
8    }
9  ]
10}

Update style

Update a style’s properties for a specific breakpoint and pseudo-class.

style_name
stringRequired

The name of the style to update.

breakpoint_id
string

The breakpoint to target (e.g., main, medium, tiny). Defaults to main.

pseudo
string

The pseudo-class to target (e.g., hover, focus). Defaults to noPseudo.

properties
array

An array of property objects to add or update.

remove_properties
array

An array of property names to remove.

{{ title: 'Action Example' }}
1{
2  "actions": [
3    {
4      "update_style": {
5        "style_name": "Primary Button",
6        "pseudo": "hover",
7        "properties": [
8          { "property_name": "background-color", "property_value": "#0056b3" }
9        ]
10      }
11    }
12  ]
13}

Learn about Webflow styles and supported CSS properties

A tool, that when called, will get a list of all CSS properties supported by the Webflow Designer.

Tool: de_learn_more_about_styles