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!

With this launch I discovered Webstudio the first time. Sounds really cool.

Awesome guys!! Love Webstudio! 😍

This is a brilliant enhancement for Webstudio! Integrating CSS Variables so deeply into a visual development platform opens up so many possibilities for customization and efficiency. I love how you’ve made it easy to create and manage a design system, and the support for libraries like Open Props is a huge plus. The ability to use variables in complex micro-interactions and across different breakpoints will definitely streamline the design and development process. The simultaneous design and build feature sounds incredibly useful for experimenting in real-time. Excited to dive into CSS Variables 101 and see how these new features can elevate my web projects. Kudos to the Webstudio team for empowering creators with such powerful tools!

Nice launch! CSS variables could make life way easier for tweaking designs. I might actually try this out on my next project.

OMG THIS IS A STRAIGHT LIFE AND GAMER CHANGER!! THANKS SO MUCH FOR LAUNCHING THIS PLATFORM FOR REAL!!!❤️❤️❤️❤️❤️❤️❤️❤️❤️

Been using webstudio for a while now and I like it. I really like the open source aspect, but especially the customization options I found lacking in other, similar providers. Here's hoping much success to Webstudio!