Using the CSS Calc() Function in Webflow

At a glance

The community member has a question about using the CSS calc() function in Webflow, specifically for implementing a transition-duration calculation involving custom variables. The comment suggests that the community member can use custom code embeds, global styles, or custom CSS to achieve this functionality in Webflow, and that the syntax for using custom variables should be the same as for color variables. However, there is no explicitly marked answer in the comments.

JJeff

Hello everyone! I have a question about Webflow that I'd like to ask:
Does anyone know how to use the CSS calc() function in Webflow? Is it possible?
I've seen a CSS code snippet using calc() that looks like this:

css


transition-duration: calc(.16s + 20ms * (var(--total-items) - var(--item-number)));

I'm curious if there's a way to implement this kind of calculation in Webflow's design interface, especially when it involves custom variables. If it's possible, how exactly would one go about doing it?
Any help or suggestions would be greatly appreciated!

1 comment

MMatt Johnson

you can place a custom code embed within the canvas i n Webflow and basically write any html, css or JS you want.

You could also add CSS to the global styles embed that should be at the top and lastly you could add custom CSS. To the head of the whole site from site settings or just a page from page settings.

The syntax you see above should be the same for color variables. Otherwise if you preview CSS from the option bottom left in Webflow, you can grab them from there as well.

Add a reply

Community forum for knowledge and support

Using the CSS Calc() Function in Webflow