Custom CSS Properties & Enhancing Webflow's Styling Flexibility

Hi everyone,

When is the “custom CSS properties” feature expected to be released? And is there a waitlist for its beta version?

With the upcoming implementation of variables and custom CSS properties, the need to embed custom code for styling will become largely redundant. The only styling exception might be for adjusting the REM size. Will we have an option to adjust this without embedding code on each page specifically for the REM setting? Missing this would be a significant oversight, especially given the significant advancements being made in enhancing the platform’s styling capabilities.

Additionally, it would be beneficial if we could set more flexible values in the variables. I’m referring to the flexibility demonstrated in the “custom CSS properties” demo, where functions like calc() and clamp() are used. This would streamline the creation of variables that combine the properties of two or more other variables, making the establishment of a dynamic and procedural design system much easier.

4 Likes

Anyone from Webflow who can answer?

I’d also love to know about that!

C’mon guys… Give us an answer… I’m sick of adding CSS in an embed.

It’s pretty weird. It was announced, demoed, and received a lot of attention at the Webflow conference. However, there has been complete silence, and they haven’t bothered to comment on any questions whatsoever.

1 Like

Hi! I’m Tai and I’m the sole engineer on this project.

Sorry for the lack of response — we are actively working on this feature to iron out as many bugs and polishing as much as we can. We have a few alpha testers providing feedback and helping to find issues before we release :slight_smile:.

Regarding your post:

The only styling exception might be for adjusting the REM size. Will we have an option to adjust this without embedding code on each page specifically for the REM setting? Missing this would be a significant oversight, especially given the significant advancements being made in enhancing the platform’s styling capabilities.

Do you mean being able to set a REM value on a :root selector? If so, at this moment we’re not introducing this capability in this feature set, as the focus is more on expanded access to css properties and values. This is a great point though, and an extremely common workflow in web development.

That said, my team and I are tracking this ticket to see how we could introduce a way to set CSS on the root selector in a future enhancement, for the time being, we’ll have to keep using custom code embedding to set the base REM.

Regarding using flexible values in variables and CSS functions like calc/clamp, you will be able to use css variables in the these values (e.g. clamp(var(--base-font), 1.5rem, 1.5rem)).

Hope that answers your question, let me know if you need further clarification!

2 Likes