▼
Streaming live at 10am (PST)

Multiply effect on Gradient Overlay

Design help CMS
#1

Hi guys,
I’ve included my share link below.
The area specifically where I’m having trouble with is the blue/orange service boxes on the home page.
The designer wishes to have a Multiply effect on the gradient overlay/wash. This isn’t available on Webflow per say, so I’ve created an rule for it on the custom code (below)

.service {mix-blend-mode: multiply}

This is carrying over to the code in the public site, but the multiply effect is still not right.
Do I need to go about doing this a different in order to achieve this multiply effect?

Note the difference between expected design on a Sketch file vs Webflow.

09
Screen Shot 2018-03-08 at 08.49.09.jpg1450×652 288 KB

03
Screen Shot 2018-03-08 at 08.50.03.jpg2900×1724 531 KB

Here is my public share link:
https://preview.webflow.com/preview/mcevoycraig?preview=4c849e1f8f2a93ddab263ba28cb2ca17

#2

Couldn’ find where you’ve put the code but if you have a gradient and an image on the same element it’s not going to work with mix-blend-mode. You’d need to have an element with the gradient on top of an element with the image. Use position:absolute to overlay your element with image with the element with gradient.

With the structure you have, prefer using background-blend-mode (background-blend-mode:multiply)

For example, the CSS below would work blending a bg color with a bg image on the same element:

.blended {
  background-image: url(face.jpg);
  background-color: red;
  background-blend-mode: multiply;
}

Blend modes are awesome :slight_smile:

#3

Hey Vincent!
Thanks for your response…
So I did what you suggested. If you take a look at the main hero image on the home screen (home-wrap)
I have a div with a class overlay positioned:absolute over this with the gradient set at this level and this keeps it separate to the main hero background image.
In the custom code I then placed:

.overlay { background-blend-mode: multiply; }

Again this is coming through on the published code but it is still not blending in right?

what am I doing wrong?

#4

Fixed it! The background-blend-mode: multiply; rule goes on the image class, along with a solid color.
thanks again for your help. :slight_smile:

3 Likes
#5

Hey! I don’t suppose you guys know a workaround for multiply not working on IE?
I got it working and it looks great. But of course IE doesn’t support it… :frowning:

Can I try some sort of custom code to bypass this?

#6

can you please elaborate? I’m not sure how to make this work

#7

Hello!

Thank you for coming up with this doubt. I had it too, and this topic helped me search a bit more instead of giving up on the idea right away.

Try this:
http://sab.webflow.io/blend-modes

Credits to @vincent for this update.
Btw, is there any how to see the results in de Design before publish the website?

1 Like
#8

Thanks @DMartins

Prefer using the new sandbox, the old one is very messy and abandoned :slight_smile:

https://sbx.webflow.io/blending-modes

1 Like