Consistency and speed of iteration—these are the main properties of a great design system. The full power of CSS variables is now available in Webstudio: colors, gradients, shadows, spacings, and even micro-interactions are now unlocked.
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!
