cssbackground-blend-modemix-blend-mode

Multiply mode in CSS?


In Photoshop if you import a JPG image with a white background into a document with a blue background, you can make the white background of the image disappear by setting the image to "multiply" mode.

Can I do exactly the same thing with CSS alone?


Solution

  • In CSS you can use mix-blend-mode

    The mix-blend-mode CSS property describes how an element content should blend with the content of the element that is below it and the element's background.

    Snippet

    body {
      margin: 0;
      background: url(http://lorempixel.com/1200/1200) no-repeat 0 0 / cover
    }
    img {
      mix-blend-mode: multiply;
    }
    <img src="//placehold.it/300" />

    Or you can use background-blend-mode

    The background-blend-mode CSS property describes how the element's background images should blend with each other and the element's background color.

    Snippet

    div {
        width: 300px;
        height: 300px;
        background: url('https://mdn.mozillademos.org/files/8543/br.png'),url('https://mdn.mozillademos.org/files/8545/tr.png');
        background-blend-mode: multiply;
    }
    <div></div>

    IE doesn't support both, see Support here and here