Blending Transparent Backgrounds with Mix-Blend-Mode in WebStudio

it's supposed to be like this
(this works on webflow)

Any links to examples?

this one @Bogdan https://little-elephant-digital.wstd.io/

Do you have a webflow example?

yes https://mindful-dental.webflow.io/

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

this is on codesandbox @Bogdan https://jrjlhf.csb.app/

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

reference https://jrjlhf.csb.app/

It's not about webstudio. See webflow example, it is direct parent.

is this webflow? https://jrjlhf.csb.app/

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"

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

okay found it

might make sense to explore this as plugin in the future