Multiply effect on Gradient Overlay

Design help CMS
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: