Streaming live at 10am (PST)

Mix-blend-mode showing up red.....basically not working


#1

Hi all!

So I’ve been building my site in webflow now for a few days, literally love working with the system, so powerful and it’s a dream…

Basically I’ve been trying to get a mix-blend-mode to work within my page on specific elements, namely the shapes :[https://preview.webflow.com/preview/lisle-folio-fac6ff?preview=02731fe61b527183ae2c8db691856ae2](http://my preview page)

I have tried with this code as well: http://sab.webflow.io/blend-modes , but nothing seems to work. When I insert the code it’s giving me a red highlight in the custom code section as well, see screen grab below.

Am I doing something wrong? When I adjust the code with the mix-blend style in inspect element it works great, so why not in the custom code…have been matching with the right classes as well but to no avail.

Any help would be much much appreciated. Thanks guys and have a great day!
L


#2

Hi there @Lisle,

I’m not sure whether you’ve already figured out a solution, but looking at your preview link it all looks fine to me – the CSS property is there and the blending clearly happens.

A quick look at caniuse.com suggests that this property is not yet widely supported, but that can’t be the problem since you’re obviously using a Chrome version that supports it.


edit: Looking closer I see that your screenshot is taken in preview mode. Webflow doesn’t apply styles from HTML-Head/pre- custom code in preview mode. Once you publish the site (to a *.webflow.io or custom domain) the styles should be applied and things should work as expected.


#3

Thanks for that mate i appreciate you taking a look for me.
I managed to tweak a few things and it’s working out fine, I added the code i had into the ‘custom code’ section with style tags and it worked. =)

Thanks again,

Lisle