Streaming live at 10am (PST)

Additive overlay in webflow

can we do additive overlay in webflow?

Are you refering to blend modes? Blend mode can be achieved with Canvas properties or Javascript, but also with CSS3. Here are the available parameters.

mix-blend-mode: normal;
mix-blend-mode: multiply;
mix-blend-mode: screen;
mix-blend-mode: overlay;
mix-blend-mode: darken;
mix-blend-mode: lighten;
mix-blend-mode: color-dodge
mix-blend-mode: color-burn;
mix-blend-mode: hard-light;
mix-blend-mode: soft-light;
mix-blend-mode: difference;
mix-blend-mode: exclusion;
mix-blend-mode: hue;
mix-blend-mode: saturation;
mix-blend-mode: color;
mix-blend-mode: luminosity;

The “additive” label isn’t used that much nowadays. In Photoshop, it’s called Linear Dodge and has appropriate results when only used without opacity.

What are you trying to achieve?

2 Likes

https://preview.webflow.com/preview/dtsgold?preview=c45940e8cb3f3cfe4e3a88e740afa19c

this is the link to the site, I am trying to create a flowing experience on the front page when you scroll down.

the game designer said I should use linear dodge. How do I use that to get that effect that all elements are the same.

(your link does not work)

The game designer knows his stuff. Sadly, linear dodge isn’t available as a CSS filter. I’m still wondering why you need it :slight_smile: I guess I’ll get it if I see the page…

There is a blending JS library call Processing with an ADD filter in it: http://processingjs.org/reference/blend_/

I tried to find a way with Canvas but I hardly know what I’m talking about regarding Canvas, also I found lists of blending modes for canvas but linear-dodge wasn’t one of them.

the link for some reason doesn’t work, I am sorry about that.

this one does http://dtsgold.webflow.com/

can u help? Maybe we can use a different dodge to use the same effect. It’s just to make lighting on the page more dynamic, like the sun influencing the light and shading on different aspects

the site isn’t enough for me to understand what you want to do and why you need live blending. Is there a art reference?

@vincent I will ask the game designer. In the mean while, where can I check these mix blend modes within webflow?

Hi @Aimanisms, if you are referring to mix-blend-mode as found here, is that correct? https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

We do not yet have a native interface to change these values, (although good idea for that :slight_smile: however, you can add the custom css to your site in the Header. That is one thing you may try. I hope that helps :slight_smile: Cheers, Dave

@cyberdave do I just add that list as is in the header or do I need to surround it with more code? The site wasn’t specific enough on that.

Hi @Aimanisms, custom code would go in the Header or Footer or using an Embed Widget. I would suggest the following:

  1. Create a test site that you can share with others and play around with to create some working example
  2. Do some research how the mix-blend-mode is applied in real world situations. Stackoverflow.com is a good source for this kind of research
  3. Implement said research (code examples etc) into the site and start experimenting.
  4. After every change, always check your published page for any errors. You can check those by using Chrome DevTools: https://developer.chrome.com/devtools

That is how I do these kinds of things, where there is no tutorial in Webflow yet existing. I will also continue to check on this, as I want to know how this would work :slight_smile: If you find out some more info, or get a working example going, please let me know :slight_smile: Cheers, Dave

Hi all!

Just wondering, did anyone figure out how to do this? I’m trying to create a sort of venn diagram animation on my site (screenshot below) where two circles move together then overlap, becoming one, and would love if when the circles overlapped they had a blend mode (multiply) on them.

I’ve tried inputting the mix-blend codes that Vincent provided into an embed block, but with no results.

Any thoughts would be great! Cheers,
Jamie

Rather add code to the custom-code area of your site’s dashboard. Like:

<style>
.multiply {mix-blend-mode: multiply}
</style>

And add a multiply class to your image in the webflow designer

Thanks Vincent, I didn’t know how to get to the custom-code area so thanks very much! I’m not on a paid plan atm so I can’t see the results but once I’ve got my subscription set up I’ll give it a test.

Cheers,
Jamie

Why? I don’t see a custom code limitation on the free plan. Simply publish your site on webflow to see the results.

http://vincent.polenordstudio.fr/snap/acqxb.jpg

Hi Vincent I also thought it was a bit strange as I couldn’t see a custom code limitation on the plans, but I tried again, here are 2 screenshots

The first is before I clicked save changes

Then I was redirected to here…

Bit weird!

Cheers,
Jamie

Then you’re right, it’s limited. I didn’t know.

Think it’s time for me to stop being a cheapskate and get a real account! haha, thanks for the code though

haha.

i’m making a quick demo of the blending mode for you to see.

1 Like

Cheers man, very much appreciated!

A selection of the blend modes:

http://sab.webflow.com/blend-modes

http://vincent.polenordstudio.fr/snap/9brch.jpg

http://vincent.polenordstudio.fr/snap/sydmk.jpg

http://vincent.polenordstudio.fr/snap/uh98l.jpg

http://vincent.polenordstudio.fr/snap/pnq43.jpg

3 Likes