background-blend-mode with Gradient and Image

Question

currently I am not able to blend a PNG Image with a CSS-rendered Gradient. The Code looks like this:

background: linear-gradient(to right, red , blue), url(img/water.png);
background-blend-mode: overlay;

The Blend Mode is not applied when using a Gradient (and the most recent Chrome Canary Build which does support the background-blend-mode). It is however applied when using a plain Color as background, such as rgb(38, 38, 219) url(img/water.png)

Is this a limitation of the CSS Background-Blend-Mode Specification or am I doing something wrong?

All I want to do is to overlay a PNG over a Gradient, creating an effect that I can't achieve by e.g. having the PNG have lesser opacity or colorizing the PNG to begin with.

From the docs= Blending modes should be defined in the same order as the background-image CSS property.`. Therefore, change the order of the values of the `background` property. — Bram Vanroy, Nov 11 '14 at 13:57

score 10 · Accepted Answer · edited Feb 26 '15 at 12:19

it should be fine... maybe try to add the image first, then gradient: background: url(img/water.png), linear-gradient(to right, red , blue);

see the example:

.test {
  display: block;
  width: 700px;
  height: 438px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50% 50%;

background-image: url(http://www.sexyli.com/wp-content/uploads/2013/05/Green-Snake-Image-Wallpaper.jpg),
  -webkit-linear-gradient(left, red, blue);
background-image: url(http://www.sexyli.com/wp-content/uploads/2013/05/Green-Snake-Image-Wallpaper.jpg),
  -moz-linear-gradient(left, red, blue);
background-image: url(http://www.sexyli.com/wp-content/uploads/2013/05/Green-Snake-Image-Wallpaper.jpg),
  -o-linear-gradient(left, red, blue);
background-image: url(http://www.sexyli.com/wp-content/uploads/2013/05/Green-Snake-Image-Wallpaper.jpg),
  linear-gradient(to right, red, blue);
  background-blend-mode: overlay;
  }

edit: also have a look here: http://css-tricks.com/basics-css-blend-modes/

Setting it first did help. Thank you (: – Adrian MK Nov 11 '14 at 13:56 — Adrian MK, Nov 11 '14 at 13:56

background-blend-mode with Gradient and Image

1 Answers1