Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

background-blend-mode with Gradient and Image

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.

like image 745
Adrian MK Avatar asked Nov 11 '14 13:11

Adrian MK


People also ask

How do you blend a gradient in CSS?

background-blend-mode , for blending an element's background images, gradients, and background colors. mix-blend-mode , for blending elements over other elements, and lastly. isolation , a lesser used property used with mix-blend-mode for keeping elements from mixing together.

What is background blend-mode overlay?

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


1 Answers

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/

like image 105
LorDex Avatar answered Sep 28 '22 15:09

LorDex