Custom CSS properties
Webflow’s Style panel gives you access to many of the CSS properties available to web developers today. But you may want to use a CSS property to style your site that Webflow doesn’t yet support. Enter: Custom properties in Webflow. In this video, we show you how to style elements using custom properties without having to use a custom code embed. Almost anything is possible with Custom properties in Webflow.
Video transcript
Custom CSS properties — also called CSS variables — let you define reusable values in your stylesheet that you can reference throughout your CSS. Instead of repeating the same color hex or font size in dozens of places, you define it once and use the variable wherever you need it. When you want to update it, you change it in one place and it updates everywhere.
In CSS, you define a custom property with a double dash prefix, like --primary-color: #0057ff. Then you use it with the var() function, like color: var(--primary-color). Custom properties are typically defined on the :root selector so they're available globally across the page.
In Webflow, you can work with CSS variables through the Variables feature in the Designer. Webflow's variables system lets you create and manage design tokens — colors, sizes, font families — that map to CSS custom properties. When you create a variable in Webflow and apply it to an element's style, Webflow handles the var() syntax in the generated CSS automatically.
Custom properties are also useful for creating theme switching — light and dark modes, for example — because you can redefine variable values within a scoped selector or media query, and all elements using those variables update automatically.
For more advanced use cases, you can also define and reference custom CSS properties through Webflow's custom code, giving you full flexibility alongside the visual variable system.
