Join the Webstudio community

Updated 2 months ago

Blending Transparent Backgrounds with Mix-Blend-Mode in WebStudio

At a glance

The community members are discussing an issue with using mix-blend-mode in Webstudio, where it seems to fail when the item has a transparent background and doesn't take the background behind it. They provide examples of how it works in Webflow, and share a CodeSandbox example. The discussion suggests that the issue may be related to stacking contexts and position: relative on ancestor elements. The community members conclude that removing position: relative from the ancestors should resolve the issue, and that Webstudio does not have any special handling for this. There is no explicitly marked answer, but the community members provide a solution through their discussion.

Useful resources
how do you make a mix-blend-mode work with webstudio? it seems to fail when the item has transparent background it doesn't take the behind background
Attachment
CleanShot_2025-02-25_at_10.16.342x.png
A
B
29 comments
it's supposed to be like this
(this works on webflow)
Attachment
CleanShot_2025-02-25_at_10.19.142x.png
Any links to examples?
Do you have a webflow example?
do I need to fix something on the css, or is it on webstudio end? @Bogdan
Webstudio does not do anything specific. Maybe some additional configuration is done o webflow side. I will check later today.
okay thanks @Bogdan
any idea how to solve this bug @Bogdan ?
Figured. See the docs. It says mix-blend-mode blends with parent. And it works if you add background color to parent.
so it doesn't work with item > parent > parent > parent > background?
so if I do this on webstudio it won't work? @Bogdan
Attachment
CleanShot_2025-02-26_at_12.27.472x.png
It's not about webstudio. See webflow example, it is direct parent.
Attachment
image.png
Hm, alright. I might have missed something
so the mix-blend doesn't even register when you change it. it's a bug I guess
Looks like it depends on stacking. If you remove all position: relative on ancestors it will work
Webstudio does not do anything special about it
can you try using a mix-blend and share it here?
See I removed position: relative from "Container" and from "Grid 3 1"
Attachment
image.png
The idea is mix-blend-mode blends everything within stacking context. And position: relative creates one.

So in this case the problem is stacking context starts with grid 3 1 which does not have any background.
So if you remove position: relative all will work
This is how browsers work
You will see the same issue in webflow with same grid styles
might make sense to explore this as plugin in the future
Add a reply
Sign up and join the conversation on Discord