Community forum for knowledge and support

Updated 12 months ago

Controlling Opacity in Webflow Variables

At a glance

The community member has a problem understanding how to control the opacity of variables in Webflow. They want to know if they need to create new variables for different opacity levels, or if there is a cleaner way to handle this. The comments indicate that Webflow currently does not allow modifying the opacity of color variables, which is a limitation of the platform, not the Relume library. The community members discuss potential solutions, such as using rgba() values or applying opacity directly to the styles, rather than using variables. There is no explicitly marked answer, but the community members provide suggestions on how to approach the problem based on the specific project requirements.

Hey πŸ™‚
I have a problem understanding the "new" variables in Webflow. I have already understood when and how to use the variables, but I don't understand how to control the opacity. As an example I have a base colour "primary dark", at a certain point I want to set the opacity of the background colour to 80%. Do I then have to create a new base colour "primary dark 0.8"? What happens if I then also need 50%? Or 26%? For me, this applies to text colours and background colours. What is the cleanest way for such cases?

R
M
M
4 comments

Does rgba(0,0,0,0) not work in there?

Yeah for sure - you've pointed out a current limitation of the feature set for Webflow and Variables. As of right now, you can't modify opacity of a color variable. This is not a limitation of Relume necessarily - just an inherited one I guess.



Thank you for your answer πŸ™‚ I didn't mean to question the Relume Library, sorry if it sounded like that πŸ˜„

Can you perhaps help me with how I should deal with situations like the one I described? Should I create countless variables or should I rather do without variables in such special cases and enter oldschool HEX values of different opacities directly in the Webflow style panel?

naw, any and all feedback is welcome Marvin! I guess it kind of depends on the project really. Setting the opacity of something, while in some use cases makes sense to do and in those cases, I would put the base color without the opacity into Webflow as a variable, and then apply the base color variable to the class and "detach variable" and then adjust the opacity from there.

If you are trying to systematically create a color palette/theme, I would change up the approach a little bit and try to get your colors to an absolute shade via Figma, and then transfer whatever the results of those colors are into Webflow as a variable.

I would need more context of the actual project to better understand the problem you are trying to solve by having colors with opacities. There is more than one way to do things, for sure.

Add a reply
Sign up and join the conversation on Slack