Log in
Log into community
Join the Webstudio community
View all posts
Related posts
Was this helpful?
๐
๐
๐
Powered by
Hall
Active
Updated 3 weeks ago
0
Follow
Blending Transparent Backgrounds with Mix-Blend-Mode in WebStudio
Blending Transparent Backgrounds with Mix-Blend-Mode in WebStudio
Active
0
Follow
A
Adam Muflihun
3 weeks ago
ยท
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
A
B
29 comments
Share
Open in Discord
A
Adam Muflihun
edited 3 weeks ago
it's supposed to be like this
(this works on webflow)
Attachment
B
Bogdan
3 weeks ago
Any links to examples?
A
Adam Muflihun
edited 3 weeks ago
this one @Bogdan
https://little-elephant-digital.wstd.io/
B
Bogdan
3 weeks ago
Do you have a webflow example?
A
Adam Muflihun
edited 3 weeks ago
yes
https://mindful-dental.webflow.io/
A
Adam Muflihun
3 weeks ago
do I need to fix something on the css, or is it on webstudio end? @Bogdan
B
Bogdan
3 weeks ago
Webstudio does not do anything specific. Maybe some additional configuration is done o webflow side. I will check later today.
A
Adam Muflihun
3 weeks ago
okay thanks @Bogdan
A
Adam Muflihun
3 weeks ago
this is on codesandbox @Bogdan
https://jrjlhf.csb.app/
A
Adam Muflihun
edited 3 weeks ago
any idea how to solve this bug @Bogdan ?
B
Bogdan
3 weeks ago
Figured. See the docs. It says mix-blend-mode blends with parent. And it works if you add background color to parent.
B
Bogdan
edited 3 weeks ago
https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode
A
Adam Muflihun
3 weeks ago
so it doesn't work with item > parent > parent > parent > background?
A
Adam Muflihun
edited 3 weeks ago
so if I do this on webstudio it won't work? @Bogdan
Attachment
A
Adam Muflihun
3 weeks ago
reference
https://jrjlhf.csb.app/
B
Bogdan
edited 3 weeks ago
It's not about webstudio. See webflow example, it is direct parent.
Attachment
A
Adam Muflihun
3 weeks ago
is this webflow?
https://jrjlhf.csb.app/
B
Bogdan
3 weeks ago
Hm, alright. I might have missed something
A
Adam Muflihun
edited 3 weeks ago
so the mix-blend doesn't even register when you change it. it's a bug I guess
B
Bogdan
3 weeks ago
Looks like it depends on stacking. If you remove all position: relative on ancestors it will work
B
Bogdan
3 weeks ago
Webstudio does not do anything special about it
A
Adam Muflihun
3 weeks ago
can you try using a mix-blend and share it here?
B
Bogdan
edited 3 weeks ago
See I removed position: relative from "Container" and from "Grid 3 1"
Attachment
B
Bogdan
3 weeks ago
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.
B
Bogdan
3 weeks ago
So if you remove position: relative all will work
B
Bogdan
3 weeks ago
This is how browsers work
B
Bogdan
edited 3 weeks ago
You will see the same issue in webflow with same grid styles
A
Adam Muflihun
3 weeks ago
okay found it
B
Bogdan
3 weeks ago
might make sense to explore this as plugin in the future
Add a reply
Sign up and join the conversation on Discord
Join on Discord