CSS to apply gradient as mask to DIV

Question

I am having a div which comes with the following color definition:

div{
  background-color: #009688;
  height: 100px;
}

<div></div>

Now I want to overlay a alpha gradient on this base color to get a similar effect like I would have with this definition:

 div{
  background: linear-gradient(-45deg, rgba(0,105,96,1) 0%, rgba(11,155,159,1) 50%, rgba(2,142,145,1) 51%, rgba(0,203,175,1) 100%);
  height:100px;
}

<div></div>

The idea is that I do not want to calculate the linear-gradient behavior for every base color. Instead I want to use arbitrary base colors and add default masks to them. Is this possible with CSS3?

Answer 1

You can approximate it by using some white/black color over the background color. Simply adjust the alpha of each color to have the needed effect:

.b1 {
  background-color: #009688
}

.b2 {
  background-color: red
}

div{
  
  background-image: 
   linear-gradient(-45deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.2) 50%,  rgba(0,0,0,0.3) 51%, rgba(255,255,255,0.3) 100%);
  height:100px;
}

<div class="b1"></div>

<div class="b2"></div>