How to Create and Use CSS Variables in Webflow

In this tutorial, Sandro, co-founder of the Gemeos Webflow agency, shows you how to create and use CSS variables (design tokens) in Webflow.

1. Create your variables in Webflow

In the Designer, open the Variables panel (palette icon at the top left). Click + to create a new variable. Give it a name (for example, color-primary) and define its value. Variables are available for colors, typography, and spacing.

2. Apply variables in your styles

In an element's Style panel, where you usually set a color or size, click the variable icon and select your variable from the list. Every element using that variable updates automatically when you change it.

3. Create modes (dark mode, variants)

Webflow variables support modes: set alternative values for the same variables (for example, color-primary in dark mode). Activate a mode with a class or an attribute on the body.

4. Custom CSS variables via embed

For variables that aren't natively supported (complex spacing, shadows, radius), add a global CSS embed with your custom properties and use them in custom CSS or embeds on your pages.

Conclusion

CSS variables speed up global changes and keep everything consistent. For naming best practices: create a consistent color system.