Webstudio Variables

Build and reuse expertly crafted Design Systems

Design Tools

Website Builder

No-Code

Hey Creators! Webstudio is an advanced visual development platform that allows creators to build extremely fast and versatile websites, integrate them with a variety of headless backends, all while having full creative freedom. Today we are launching CSS Variables—one of the most powerful features in CSS. As usual, we’ve aim to get you the full power of CSS Variables in a Visual Development platform: 1. Create a design system Define global styles like colors, gradients, sizes, and box shadows. 2. Use your variables everywhere You're not limited to just sizes, colors, and font families. Use variables in gradients, box shadows, transforms, and more! 3. Start with libraries like Open Props Because there are no abstractions, you can use existing CSS variable libraries like Open Props, an expertly crafted library of CSS variables, and the recommended starting point in Webstudio. 4. Create complex micro-interactions CSS variables go beyond reusability! You can define variables anywhere in the navigator, such as on a link, and modify the variables on hover. Then, you can use those variables on the children to create complex micro-interactions! 5. Design and build simultaneously Experimenting on the canvas just got a whole lot better. Now, you can arrow through your variables and see them rendered on the canvas to see which works best. 6. Change variables by breakpoint CSS variables in Webstudio use the same UI as the rest of your styles, enabling breakpoints to work the same way. Watch CSS Variables 101 or learn how to create micro-interactions with CSS variables for a deep dive. Happy building!