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.
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/