How do I use variables in Webflow?

Create a variable for a value you reuse

A variable stores one style value and reuses it. Webflow provides color, size, percentage, number, and font family variables. When you change the stored value, every style linked to that variable updates. Color swatches you created earlier now live in the Variables panel as color variables.

Open the Variables panel. Click New variable and choose the type. Hover the default name, click the settings cog, and type a name you will recognize. A slash creates a group. Colors/Brand and Colors/Ink appear under Colors. Space/Section can sit in its own group.

Click the value to set it. A color variable uses the color picker. A size variable takes a number and a unit. A percentage or number variable takes a number. A font variable uses the font dropdown. Custom fonts uploaded to the site or the Workspace, including Google and Adobe fonts, appear in that list. Use a color for text, backgrounds, borders, and gradient stops. Use a size for spacing, type size, and dimensions. A number can set font weight or opacity. Font weight wants a positive integer from 1 to 1000, usually a step such as 400 or 600.

Example: create Colors/Brand and set the blue you use on buttons and links. Create Space/Section and set it to 80px. You will attach both in the next step, then change them in one place.

Apply it from the purple dot

In the Style panel, click the purple dot at the upper left of a matching field. Color swatches, size fields, percentage fields, number fields, and the Font field in Typography each have that dot. Choose the variable. Webflow highlights the linked value in purple.

You can create the variable from the same dot. Select the element, click the purple dot, click the plus icon, name the variable, set the value, and click Save. To point that new variable at one that already exists, click the purple dot on the value field and choose the existing variable.

Example: select a button, open its background, click the purple dot, and choose Colors/Brand. Select a text link and set its text color the same way. Select the hero section, open the top padding, and choose Space/Section. The button, the link, and the padding now read from the panel instead of from a one-off value typed on each element. A font variable uses the Font field and does not upload font files.

Change one value, or unlink one element

Click the value in the Variables panel. You can also hover a linked field in the Style panel and click the pencil. Elements that use the variable update on the canvas. You do not restyle each button by hand.

To unlink one element, click the purple value in the Style panel, click the variable name, and click Unlink. That element goes back to a normal value. The others stay linked.

An alias is a variable that follows another variable of the same type. Click the dot to the right of the new variable and choose the source. When the source changes, the alias follows. Unlink from the value menu when the alias should hold its own value.

Example: Colors/Button aliases Colors/Brand. You darken Colors/Brand. Buttons and links that use either name pick up the darker blue. A footer button you unlinked keeps the previous blue. Drag a variable by its handle to reorder it, or open its cog and click Delete.

Add a mode for a breakpoint or a theme

A mode stores another set of values on the same variables. One mode in a variable collection can be tied to each breakpoint. A separate mode can be a theme you apply by hand.

For a breakpoint, open the Variables panel, click the New mode dropdown arrow, and name the mode, such as Tablet spacing. In the Responsive dropdown, choose Tablet. Click Create. The new column starts from the Base values. Click a variable in that column and replace the value the tablet should use. A visitor on that breakpoint gets the mode. A variable you leave alone keeps its Base value.

For a theme that is not a breakpoint, create a mode and choose No in the Responsive dropdown. On the page, select the element that should use the theme, such as the Body or a hero. In the Style panel, open the Selector field dropdown and choose the mode.

A child can miss a value such as font color when that color is inherited from the Body. Select the child and link its color to the variable directly.

Example: Space/Section stays 80px on Base. In Tablet spacing, set it to 48px. Desktop keeps 80px. The tablet breakpoint uses 48px. The phone does not inherit that tablet mode. Add a mode for mobile portrait if the phone needs its own number. A duplicate of a mode clears the Responsive dropdown, because the collection can keep only one mode on each breakpoint.

Name groups clearly, then publish

The group is the text before the slash. Colors/Brand sits in Colors. To remove a variable from a group, open the cog, delete the group prefix, and save.

The plus icon next to Site variables adds another set of variables. That set is not a CMS Collection. An alias from one set to another uses the source variable's Base value. Libraries can share variables, groups, and modes with other sites in the Workspace.

Publish after the values are the ones you want live. Check the homepage and one inner page. Buttons and links should show Colors/Brand. Hero padding should follow Space/Section, including the tablet value if that mode exists.

If a button stays on the old blue, it is unlinked or it uses another variable. If desktop sections show the tablet padding, the mode is on the Selector, or the Responsive dropdown is the wrong breakpoint. If a heading ignores a theme color, link that heading to the variable.