Join the Webstudio community

Updated 3 weeks ago

Blending Transparent Backgrounds with Mix-Blend-Mode in WebStudio

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