cssgoogle-chromebackground-blend-mode

Blend mode in Chrome not applying properly


Was working towards a repeated background that has a spotlight and decided to use blend modes to achieve this.

However, it appears as if blend modes did not apply in Chrome.

Replicated here: http://jsfiddle.net/pptn4f5v/7/

body {
    background: url("https://dl.dropboxusercontent.com/u/10686242/testfreeimage.jpg"), url("https://dl.dropboxusercontent.com/u/10686242/background-blend%20-%20Copy.png") #030303;
    background-repeat: repeat, no-repeat;
    background-blend-mode: multiply, normal;
    background-size: auto, contain;
}

Is this a limitation of Chrome? This works perfect in Firefox.


Solution

  • Probably it is a bug in Chrome

    However, you can get this effect more easily, and it will work ok in both browsers

    Use only 2 backgrounds, and create the spot with a gradient

    .test {
        background: url("https://dl.dropboxusercontent.com/u/10686242/testfreeimage.jpg"), 
              radial-gradient(circle at 250px 100px, transparent 50px, #606060 150px);
        background-blend-mode: darken;
      height: 400px;
    }
    <div class="test"></div>